<?php
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}
?>

<div id='orderpickingapp-settings' class='wrap'>
    <?php
    $orderpickingapp_apikey = get_option('orderpickingapp_apikey');
    if( !isset($orderpickingapp_apikey) || empty($orderpickingapp_apikey) ):
        ?>
        <section class="cta-with-feature ptb-120">
            <div class="bg-dark text-white rounded-custom position-relative opa-trial-hero">
                <div class="row">
                    <p class="opa-inline-039">Order Picking App, the smart way of picking</p>
                    <div class="col-lg-5 col-md-6">
                        <div class="cta-with-feature-wrap p-5 opa-inline-038">
                            <ul class="nav justify-content-center feature-tab-list" id="nav-tab" role="tablist">
                                <li class="nav-item"><a class="nav-link active" href="#new_user"  data-bs-toggle="tab" data-bs-target="#new_user" role="tab" aria-selected="true">Start free trial</a></li>
                                <li class="nav-item"><a class="nav-link" href="#existing_user" data-bs-toggle="tab" data-bs-target="#existing_user" role="tab" aria-selected="false">I have a key</a></li>
                            </ul>

                            <div class="tab-content rounded-custom p-50 opa-inline-037">
                                <div class="tab-pane fade show active" id="new_user" role="tabpanel">
                                    <form method='post'>
                                        <h5 class="opa-inline-035"><?php esc_html_e( 'Connect your webshop', 'order-picking-app' ); ?></h5>
                                        <div class="form-group">
                                            <label><?php esc_html_e( 'Company', 'order-picking-app' ); ?></label>
                                            <input type="text" class="form-control" name="billing_company" value="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>">
                                        </div>
                                        <div class="form-group">
                                            <label><?php esc_html_e( 'Country', 'order-picking-app' ); ?></label>
                                            <input type="text" class="form-control" name="billing_country" value="<?php echo esc_attr( get_option( 'woocommerce_default_country' ) ? get_option( 'woocommerce_default_country' ) : '' ); ?>">
                                        </div>
                                        <div class="form-group">
                                            <label><?php esc_html_e( 'City', 'order-picking-app' ); ?></label>
                                            <input type="text" class="form-control" name="billing_city" value="<?php echo esc_attr( get_option( 'woocommerce_store_city' ) ? get_option( 'woocommerce_store_city' ) : '' ); ?>">
                                        </div>
                                        <div class="form-group">
                                            <label><?php esc_html_e( 'Address 1', 'order-picking-app' ); ?></label>
                                            <input type="text" class="form-control" name="billing_address_1" value="<?php echo esc_attr( get_option( 'woocommerce_store_address' ) ? get_option( 'woocommerce_store_address' ) : '' ); ?>">
                                        </div>
                                        <div class="form-group">
                                            <label><?php esc_html_e( 'Address 2', 'order-picking-app' ); ?></label>
                                            <input type="text" class="form-control" name="billing_address_2" value="<?php echo esc_attr( get_option( 'woocommerce_store_address_2' ) ? get_option( 'woocommerce_store_address_2' ) : '' ); ?>">
                                        </div>
                                        <div class="form-group">
                                            <label><?php esc_html_e( 'Postal', 'order-picking-app' ); ?></label>
                                            <input type="text" class="form-control" name="billing_postcode" value="<?php echo esc_attr( get_option( 'woocommerce_store_postcode' ) ? get_option( 'woocommerce_store_postcode' ) : '' ); ?>">
                                        </div>
                                        <div class="form-group">
                                            <label><?php esc_html_e( 'Email', 'order-picking-app' ); ?></label>
                                            <input type="email" class="form-control" name="email" value="<?php echo esc_attr( get_bloginfo( 'admin_email' ) ); ?>">
                                        </div>
                                        <button id="createAccount" class="btn btn-primary opa-inline-036"><?php esc_html_e( 'Start 30-day free trial', 'order-picking-app' ); ?></button>
                                        <p class="opa-inline-035"><?php esc_html_e( 'or check out our free demo on Apple IOS or Android. See downloads below.', 'order-picking-app' ); ?></p>
                                    </form>
                                </div>

                                <div class="tab-pane fade" id="existing_user" role="tabpanel">
                                    <form method='post' action='options.php'>
                                        <?php
                                        settings_fields( 'orderpickingapp_options' );
                                        do_settings_sections( 'orderpickingapp_options' );
                                        submit_button();
                                        ?>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-7 col-md-6">
                        <div class="container">
                            <div class="row opa-inline-034">
                                <video controls="" poster="<?php echo esc_url('https://orderpickingapp.com/wp-content/uploads/2023/12/Scherm%C2%ADafbeelding-2023-12-23-om-20.30.55.png'); ?>" preload="none" src="<?php echo esc_url('https://orderpickingapp.com/wp-content/uploads/2023/12/explainer%20orderpickingapp_v2.mp4'); ?>"></video>
                            </div>
                            <ul class="cta-feature-list list-unstyled mb-0 mt-3">
                                <li class="d-flex align-items-center py-1"><span class="dashicons dashicons-yes"></span> <?php esc_html_e( 'Orderpick with your mobile of scanner', 'order-picking-app' ); ?></li>
                                <li class="d-flex align-items-center py-1"><span class="dashicons dashicons-yes"></span> <?php esc_html_e( 'Single or batch picking', 'order-picking-app' ); ?></li>
                                <li class="d-flex align-items-center py-1"><span class="dashicons dashicons-yes"></span> <?php esc_html_e( 'Multi picker', 'order-picking-app' ); ?></li>
                            </ul>
                            <div class="action-btns mt-5">
                                <a href="<?php echo esc_url( 'https://orderpickingapp.com/plans-and-pricing/' ); ?>" target="_blank" class="btn btn-primary me-3"><?php esc_html_e( 'More information', 'order-picking-app' ); ?></a>
                            </div>
                            <br/>
                        </div>
                    </div>

                </div>
            </div>
        </section>
    <?php
    else:
        $orderpickingapp_url = 'https://orderpickingapp.com/wp-json/account/v1/settings';
        $orderpickingapp_response = wp_remote_get(
            esc_url_raw( $orderpickingapp_url ),
            array(
                'timeout'     => 30,
                'redirection' => 5,
                'headers'     => array(
                    'Authorization' => 'Bearer ' . sanitize_text_field( $orderpickingapp_apikey ),
                    'Referer'       => esc_url_raw( site_url() ),
                ),
            )
        );

        if ( is_wp_error( $orderpickingapp_response ) ) {
            $orderpickingapp_response = array();
        } else {
            $orderpickingapp_status_code = wp_remote_retrieve_response_code( $orderpickingapp_response );

            if ( 200 <= $orderpickingapp_status_code && 300 > $orderpickingapp_status_code ) {
                $orderpickingapp_response = json_decode(
                    wp_remote_retrieve_body( $orderpickingapp_response ),
                    true
                );
            } else {
                $orderpickingapp_response = array();
            }
        }

        $orderpickingapp_app_settings = array();
        if( isset($orderpickingapp_response['settings']) ){
            $orderpickingapp_app_settings = $orderpickingapp_response['settings'];
        }

        $OrderPickingApp = new OrderPickingApp();
        $orderpickingapp_all_categories = $OrderPickingApp->getCategories('return', 'pickingroute');
        $orderpickingapp_categories = get_terms('pickingroute');

        if( empty($orderpickingapp_all_categories) ) {
            $orderpickingapp_categories = get_terms('product_cat');
            $orderpickingapp_all_categories = $OrderPickingApp->getCategories('return', 'product_cat');
        }
        wp_enqueue_script( 'media' );

        $OrderPickingApp_Admin = new OrderPickingApp_Admin();
        $orderpickingapp_all_meta_keys = $OrderPickingApp_Admin->orderpickingapp_get_all_meta_keys('product');

        // Needed for uploads
        if(function_exists( 'wp_enqueue_media' )){
            wp_enqueue_media();
        }

        $orderpickingapp_shipping_methods = [];
        $orderpickingapp_shipping_options = [];

        $orderpickingapp_zones = WC_Shipping_Zones::get_zones();

        $orderpickingapp_zones[] = ['id' => 0];
        foreach ($orderpickingapp_zones as $orderpickingapp_zone_data) {

            $orderpickingapp_zone_id  = $orderpickingapp_zone_data['id'];
            $orderpickingapp_zone_obj = new WC_Shipping_Zone($orderpickingapp_zone_id);

            $orderpickingapp_zone_name = (0 === $orderpickingapp_zone_id)
                ? 'Other regions'
                : $orderpickingapp_zone_obj->get_zone_name();

            $orderpickingapp_methods = $orderpickingapp_zone_obj->get_shipping_methods(true);

            foreach ($orderpickingapp_methods as $orderpickingapp_method) {

                $orderpickingapp_key =
                    $orderpickingapp_method->id . ':' . $orderpickingapp_method->instance_id;

                $orderpickingapp_shipping_options[$orderpickingapp_key] = [
                    'label' => $orderpickingapp_method->get_title(),
                    'zone'  => $orderpickingapp_zone_name,
                ];

                $orderpickingapp_shipping_methods[$orderpickingapp_method->id] =
                    $orderpickingapp_method->get_method_title();
            }
        }

        // Fallback methods
        $orderpickingapp_default_methods = WC()->shipping()->get_shipping_methods();
        foreach ($orderpickingapp_default_methods as $orderpickingapp_method) {
            $orderpickingapp_shipping_methods[$orderpickingapp_method->id] =
                $orderpickingapp_method->get_method_title();
        }

        update_option('orderpickingapp_subscription_id', $orderpickingapp_app_settings['subscription']['id']);

        if( isset($orderpickingapp_app_settings['subscription']['trial']) && $orderpickingapp_app_settings['subscription']['trial'] ): ?>
            <section class="our-integration">
                <div class="container">
                    <div class="position-relative w-100">
                        <div class="row position-relative connected-app-content bg-white border border-2 transition-base rounded-custom">
                            <div class="col-12 opa-inline-006">
                                <h5 class="opa-inline-033">TRIAL PERIOD</h5>
                                <p class=text-muted">Your trial will end in <?php echo esc_html( absint( $orderpickingapp_app_settings['subscription']['trial_days'] ) ); ?> days!</p>
                                <?php if( $orderpickingapp_app_settings['subscription']['trial_days'] > 0 ): ?>
                                    <a href="<?php echo esc_url( 'https://orderpickingapp.com/mijn-account' ); ?>" title="Check license" target="_blank" class="btn btn-primary">Check license</a>
                                <?php else: ?>
                                    <a href="<?php echo esc_url( 'https://orderpickingapp.com/mijn-account' ); ?>" title="Extend license" target="_blank" class="btn btn-primary">Extend license</a>
                                <?php endif; ?>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        <?php endif; ?>

        <!-- Nav tabs -->
        <ul class="nav justify-content-center feature-tab-list mt-4" id="nav-tab" role="tablist">
            <li class="nav-item"><a class="nav-link active" href="#api_credentials"  data-bs-toggle="tab" data-bs-target="#api_credentials" role="tab" aria-selected="true">Settings</a></li>
            <li class="nav-item"><a class="nav-link" href="#api_users" data-bs-toggle="tab" data-bs-target="#api_users" role="tab" aria-selected="false">Users</a></li>
            <li class="nav-item"><a class="nav-link" href="#pickingroute" data-bs-toggle="tab" data-bs-target="#pickingroute" role="tab" aria-selected="false">Pickingroute</a></li>
            <li class="nav-item"><a class="nav-link" href="#shops" data-bs-toggle="tab" data-bs-target="#shops" role="tab" aria-selected="false">Shops</a></li>
            <li class="nav-item"><a class="nav-link" href="#packing-display" data-bs-toggle="tab" data-bs-target="#packing-display" role="tab" aria-selected="false">Packing</a></li>
            <li class="nav-item"><a class="nav-link" href="#display" data-bs-toggle="tab" data-bs-target="#display" role="tab" aria-selected="false">Narrowcasting</a></li>
            <li class="nav-item"><a class="nav-link" href="#picklist" data-bs-toggle="tab" data-bs-target="#picklist" role="tab" aria-selected="false">Picklist</a></li>
            <li class="nav-item"><a class="nav-link" href="#analytics" data-bs-toggle="tab" data-bs-target="#analytics" role="tab" aria-selected="false">Analytics</a></li>
            <li class="nav-item"><a class="nav-link" href="#api_account" data-bs-toggle="tab" data-bs-target="#api_account" role="tab" aria-selected="false">Account</a></li>
            <li class="nav-item"><a class="nav-link" href="#logs" data-bs-toggle="tab" data-bs-target="#logs" role="tab" aria-selected="false">Logs</a></li>
        </ul>

        <!-- Tab panes -->
        <div class="tab-content rounded-custom p-50" id="nav-tabContent">

            <div class="tab-pane fade show active" id="api_credentials" role="tabpanel">
                <div class="row justify-content-center">
                    <img class="opa-inline-032" src="<?php echo esc_url( OPA_PLUGIN_URL . 'admin/images/orderpickingapp.png' ); ?>"/>
                    <h5 class="opa-inline-031">API key</h5>
                    <strong class="opa-inline-031"><?php echo esc_html( $orderpickingapp_apikey ); ?></strong>
                    <?php
                    $orderpickingapp_generator = new Picqer\Barcode\BarcodeGeneratorPNG();
                    echo '<img class="opa-inline-030" src="data:image/png;base64,' . esc_attr( base64_encode( $orderpickingapp_generator->getBarcode( $orderpickingapp_apikey, $orderpickingapp_generator::TYPE_CODE_128 ) ) ) . '">';
                    ?>
                    <input id="token" type="hidden" name="token" value="<?php echo esc_attr( $orderpickingapp_apikey ); ?>">
                    <form class="client_options opa-inline-029" method="post">
                        <p class="opa-inline-028">Set up the Order Picking App software here so that it suits your way of working. To add phones with the Order Picking App (iOS or Android), download the app from the app store and scan the barcode to connect. This way, all employees can have their own Order Picking app on their phone.</p>
                        <div class="form-group">
                            <?php if( isset($orderpickingapp_app_settings['logoUrl']) && !empty($orderpickingapp_app_settings['logoUrl']) ): ?>
                                <img class="app_logo opa-inline-027" src="<?php echo esc_url( $orderpickingapp_app_settings['logoUrl'] ); ?>"/>
                            <?php else: ?>
                                <img class="app_logo opa-inline-026" src="" />
                            <?php endif; ?>
                            <input type="text" class="opa-inline-015 logoUrl form-control"  placeholder="Url to your logo" name="logoUrl" value="<?php echo esc_attr( ( isset( $orderpickingapp_app_settings['logoUrl'] ) && ! empty( $orderpickingapp_app_settings['logoUrl'] ) ) ? $orderpickingapp_app_settings['logoUrl'] : '' ); ?>">
                            <a href="#" class="opa-inline-025 button app_logo_upload" >Upload</a>
                        </div>
                        <div class="form-group">
                            <input type="checkbox" name="allow_logo_use" value="yes" <?php checked( $orderpickingapp_app_settings['allow_logo_use'] ?? '', 'yes' ); ?>>
                            <label  class="form-check-label" for="allow_logo_use"><?php esc_html_e( 'Yes, I want you to show my logo on Orderpickingapp.com. We will also paste the shop URL behind the logo so that we can help each other with link building.', 'order-picking-app' ); ?></label>
                        </div>

                        <h5>Select order amount to pick at once</h5>
                        <div class="form-group">
                            <select name="picking_amount">
                                <option value="1" <?php selected( isset( $orderpickingapp_app_settings['picking_amount'] ) ? $orderpickingapp_app_settings['picking_amount'] : '', '1' ); ?>>Single order picking</option>
                                <?php for ($x = 2; $x <= 20; $x++): ?>
                                    <option value="<?php echo esc_html( $x ); ?>" <?php selected( isset( $orderpickingapp_app_settings['picking_amount'] ) ? $orderpickingapp_app_settings['picking_amount'] : '', $x ); ?>><?php echo esc_html( $x ); ?> orders</option>
                                <?php endfor; ?>
                            </select>
                        </div>

                        <h5>Scan settings</h5>
                        <div class="form-check">
                            <input class="opa-inline-024 form-check-input" type="radio"  name="use_barcodescanner" value="no" <?php echo ( (isset($orderpickingapp_app_settings['use_barcodescanner']) && $orderpickingapp_app_settings['use_barcodescanner'] == 'no') || empty($orderpickingapp_app_settings['use_barcodescanner']) )? 'checked' : ''; ?>>
                            <label class="form-check-label" for="no">Use phone camera
                                <img class="opa-inline-021" src="<?php echo esc_url( 'https://orderpickingapp.com/wp-content/themes/orderpickingapp/assets/img/mobile.png' ); ?>"/>
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="opa-inline-023 form-check-input" type="radio"  name="use_barcodescanner" value="bluetooth" <?php echo ( !isset($orderpickingapp_app_settings['use_barcodescanner']) || empty($orderpickingapp_app_settings['use_barcodescanner']) || (isset($orderpickingapp_app_settings['use_barcodescanner']) && $orderpickingapp_app_settings['use_barcodescanner'] == 'bluetooth'))? 'checked' : ''; ?>>
                            <label class="form-check-label" for="bluetooth"><?php esc_html_e( 'Use phone and Bluetooth scanner', 'order-picking-app' ); ?>
                                <img class="opa-inline-021" src="<?php echo esc_url( 'https://orderpickingapp.com/wp-content/themes/orderpickingapp/assets/img/bluetooth.png' ); ?>"/>
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="opa-inline-022 form-check-input" type="radio"  name="use_barcodescanner" value="android" <?php echo ( (isset($orderpickingapp_app_settings['use_barcodescanner']) && $orderpickingapp_app_settings['use_barcodescanner'] == 'android') )? 'checked' : ''; ?>>
                            <label class="form-check-label" for="android">Use Barcodescanner for Android and Bluetooth
                                <img class="opa-inline-021" src="<?php echo esc_url( 'https://orderpickingapp.com/wp-content/themes/orderpickingapp/assets/img/barcodescanner.jpeg' ); ?>"/>
                            </label>
                        </div>

                        <h5>Woocommerce custom settings</h5>
                        <strong  class="opa-inline-016">Custom picking status(en)</strong><br/>
                        <?php
                        $orderpickingapp_app_settings['orderpickingapp_order_status'] =  (array)$orderpickingapp_app_settings['orderpickingapp_order_status'];
                        $orderpickingapp_wc_order_statussen = wc_get_order_statuses();
                        foreach( $orderpickingapp_wc_order_statussen as $orderpickingapp_wc_order_status => $orderpickingapp_wc_order_status_name ): ?>
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input" name="orderpickingapp_order_status" value="<?php echo esc_attr( $orderpickingapp_wc_order_status ); ?>" <?php echo ( isset($orderpickingapp_app_settings['orderpickingapp_order_status']) && in_array($orderpickingapp_wc_order_status, $orderpickingapp_app_settings['orderpickingapp_order_status']) )? 'checked' : ''; ?>>
                                <label class="form-check-label" for="<?php echo esc_attr( $orderpickingapp_wc_order_status ); ?>"><?php echo esc_html( $orderpickingapp_wc_order_status_name ); ?> <?php echo ( 'wc-completed' === $orderpickingapp_wc_order_status ) ? esc_html__( '(and picking status is not "Completed")', 'order-picking-app' ) : ''; ?></label>
                            </div>
                        <?php endforeach; ?>
                        <br/>
                        <h5><?php esc_html_e( 'Order handling', 'order-picking-app' ); ?></h5>
                        <div class="form-check">
                            <input type="hidden" name="manual_order_assigning" value="no">
                            <input type="checkbox" class="form-check-input" name="manual_order_assigning" value="yes" <?php echo (isset($orderpickingapp_app_settings['manual_order_assigning']) && $orderpickingapp_app_settings['manual_order_assigning'] == 'yes')? 'checked' : ''; ?>>
                            <label  class="form-check-label" for="manual_order_assigning"><?php esc_html_e( 'Enable manual order assigning to pickers', 'order-picking-app' ); ?></label>
                        </div>
                        <div class="form-check">
                            <input type="hidden" name="skip_packing" value="no">
                            <input type="checkbox" class="form-check-input" name="skip_packing" value="yes" <?php echo (isset($orderpickingapp_app_settings['skip_packing']) && $orderpickingapp_app_settings['skip_packing'] == 'yes')? 'checked' : ''; ?>>
                            <label  class="form-check-label" for="skip_packing"><?php esc_html_e( 'Skip packing and change fully picked order after picking to completed. (Internal OPA state)', 'order-picking-app' ); ?></label>
                        </div>
                        <div class="form-check">
                            <input type="hidden" name="disable_backorders" value="no">
                            <input type="checkbox" class="form-check-input" name="disable_backorders" value="yes" <?php echo (isset($orderpickingapp_app_settings['disable_backorders']) && $orderpickingapp_app_settings['disable_backorders'] == 'yes')? 'checked' : ''; ?>>
                            <label  class="form-check-label" for="disable_backorders"><?php esc_html_e( 'Disable backorders and change the order item quantity values based on the picked, and approved, picking amounts', 'order-picking-app' ); ?></label>
                        </div>
                        <div class="form-check">
                            <input type="hidden" name="disable_product_combining" value="no">
                            <input type="checkbox" class="form-check-input" name="disable_product_combining" value="yes" <?php echo (isset($orderpickingapp_app_settings['disable_product_combining']) && $orderpickingapp_app_settings['disable_product_combining'] == 'yes')? 'checked' : ''; ?>>
                            <label  class="form-check-label" for="disable_product_combining"><?php esc_html_e( 'Disable product combining by SKU/ID and process each order product as individual', 'order-picking-app' ); ?></label>
                        </div>
                        <div class="opa-inline-020">
                            <strong class="opa-inline-019">1. | Order status when order is claimed for picking (optional)</strong><br/>
                            <select name="picking_order_status">
                                <?php
                                echo '<option value="">No status change</option>';

                                $currentStatus = $orderpickingapp_app_settings['picking_order_status'] ?? '';

                                foreach ($orderpickingapp_wc_order_statussen as $orderpickingapp_new_status => $orderpickingapp_new_name) {
                                    echo '<option value="' . esc_attr($orderpickingapp_new_status) . '" ' .
                                        selected($orderpickingapp_new_status, $currentStatus, false) .
                                        '>' . esc_html($orderpickingapp_new_name) . '</option>';
                                }
                                ?>
                            </select>
                        </div>
                        <div class="opa-inline-020">
                            <strong class="opa-inline-019">2. | Order status for packing (optional)</strong><br/>
                            <select name="packing_order_status">
                                <?php
                                echo '<option value="">No status change</option>';
                                foreach ($orderpickingapp_wc_order_statussen as $orderpickingapp_new_status => $orderpickingapp_new_name) {
                                    echo '<option value="' . esc_attr($orderpickingapp_new_status) . '" ' . selected($orderpickingapp_new_status, $orderpickingapp_app_settings['packing_order_status'], false) . '>' . esc_html($orderpickingapp_new_name) . '</option>';
                                }
                                ?>
                            </select>
                        </div>
                        <div class="opa-inline-020">
                            <strong class="opa-inline-019">3a. | Pickup list (optional)</strong>
                            <div class="form-check">
                                <input type="hidden" name="enable_pickup_list" value="no">
                                <input type="checkbox" class="form-check-input" name="enable_pickup_list" value="yes" <?php echo (isset($orderpickingapp_app_settings['enable_pickup_list']) && $orderpickingapp_app_settings['enable_pickup_list'] == 'yes')? 'checked' : ''; ?>>
                                <label  class="form-check-label" for="enable_pickup_list"><?php echo esc_html_e( 'Enable pickup list. Please select a custom shipping method below for pickup!', 'order-picking-app' ); ?></label>
                            </div>
                            <strong class="opa-inline-019">If enabled; select shipping methods available for pickup</strong>
                            <?php
                            $orderpickingapp_selected_pickup_methods = $orderpickingapp_app_settings['pickup_list_method'] ?? [];
                            if (!is_array($orderpickingapp_selected_pickup_methods)) {
                                $orderpickingapp_selected_pickup_methods = [$orderpickingapp_selected_pickup_methods];
                            }
                            ?>

                            <?php foreach ($orderpickingapp_shipping_options as $orderpickingapp_shipping_value => $orderpickingapp_shipping_option): ?>
                                <div class="form-check">
                                    <input type="checkbox" class="form-check-input" name="pickup_list_method[]" value="<?php echo esc_attr( $orderpickingapp_shipping_value ); ?>" <?php checked(in_array($orderpickingapp_shipping_value, $orderpickingapp_selected_pickup_methods)); ?>>
                                    <label class="form-check-label" for="<?php echo esc_attr( $orderpickingapp_shipping_value ); ?>"><?php echo esc_html($orderpickingapp_shipping_option['zone'] . ' - ' . $orderpickingapp_shipping_option['label']); ?></label>
                                </div>
                            <?php endforeach; ?>
                        </div>
                        <div class="opa-inline-020">
                            <strong class="opa-inline-019">3b. | Delivery list (optional)</strong>
                            <div class="form-check">
                                <input type="hidden" name="enable_delivery_list" value="no">
                                <input type="checkbox" class="form-check-input" name="enable_delivery_list" value="yes" <?php echo (isset($orderpickingapp_app_settings['enable_delivery_list']) && $orderpickingapp_app_settings['enable_delivery_list'] == 'yes')? 'checked' : ''; ?>>
                                <label  class="form-check-label" for="enable_delivery_list"><?php echo esc_html_e( 'Enable delivery orders list view inside the app', 'order-picking-app' ); ?></label>
                            </div>
                            <strong class="opa-inline-019">If enabled; select shipping methods available for delivery</strong>
                            <?php
                            $orderpickingapp_selected_delivery_methods = $orderpickingapp_app_settings['delivery_list_method'] ?? [];
                            if (!is_array($orderpickingapp_selected_delivery_methods)) {
                                $orderpickingapp_selected_delivery_methods = [$orderpickingapp_selected_delivery_methods];
                            }
                            ?>

                            <?php foreach ($orderpickingapp_shipping_options as $orderpickingapp_shipping_value => $orderpickingapp_shipping_option): ?>
                                <div class="form-check">
                                    <input type="checkbox" class="form-check-input" name="delivery_list_method[]" value="<?php echo esc_attr( $orderpickingapp_shipping_value ); ?>" <?php checked(in_array($orderpickingapp_shipping_value, $orderpickingapp_selected_delivery_methods)); ?>>
                                    <label class="form-check-label" for="<?php echo esc_attr( $orderpickingapp_shipping_value ); ?>"><?php echo esc_html($orderpickingapp_shipping_option['zone'] . ' - ' . $orderpickingapp_shipping_option['label']); ?></label>
                                </div>
                            <?php endforeach; ?>
                        </div>
                        <div class="opa-inline-020">
                            <strong class="opa-inline-019">4. | Order status for completed (optional)</strong>
                            <div class="form-check">
                                <input type="hidden" name="auto_completed_order" value="no">
                                <input type="checkbox" class="form-check-input" name="auto_completed_order" value="yes" <?php echo (isset($orderpickingapp_app_settings['auto_completed_order']) && $orderpickingapp_app_settings['auto_completed_order'] == 'yes')? 'checked' : ''; ?>>
                                <label  class="form-check-label" for="auto_completed_order"><?php echo esc_html_e( 'Enable auto completed order after picking and packing', 'order-picking-app' ); ?></label>
                            </div>
                            <strong class="opa-inline-019">Change order status to:</strong>
                            <br/>
                            <select name="completed_order_status">
                                <?php
                                $orderpickingapp_selected_completed_order_status = !empty($orderpickingapp_app_settings['completed_order_status']) ? $orderpickingapp_app_settings['completed_order_status'] : 'wc-completed';
                                foreach ($orderpickingapp_wc_order_statussen as $orderpickingapp_new_status => $orderpickingapp_new_name) {
                                    echo '<option value="' . esc_attr($orderpickingapp_new_status) . '" ' . selected($orderpickingapp_new_status, $orderpickingapp_selected_completed_order_status, false) . '>' . esc_html($orderpickingapp_new_name) . '</option>';
                                }
                                ?>
                            </select>
                        </div>
                        <h5>Packing order status (optional)</h5>
                        <table class="opa-inline-018">
                            <thead>
                            <tr>
                                <th class="opa-inline-017">Order shipping method</th>
                                <th class="opa-inline-017">Status after picking</th>
                            </tr>
                            </thead>
                            <tbody>
                            <?php
                            // Ophalen van de eerder opgeslagen status-combinaties
                            $orderpickingapp_order_status_mapping = get_option('packing_order_status_mapping', []);
                            foreach ($orderpickingapp_shipping_methods as $orderpickingapp_shipping_method => $orderpickingapp_shipping_method_name) :
                                $orderpickingapp_selected_status = isset($orderpickingapp_order_status_mapping[$orderpickingapp_shipping_method]) ? $orderpickingapp_order_status_mapping[$orderpickingapp_shipping_method] : '';
                                ?>
                                <tr>
                                    <td class="opa-inline-017"><?php echo esc_html($orderpickingapp_shipping_method_name); ?></td>
                                    <td class="opa-inline-017">
                                        <select name="orderpickingapp_packing_status[<?php echo esc_attr($orderpickingapp_shipping_method); ?>]">
                                            <option value="">No status change</option>
                                            <?php
                                            foreach ($orderpickingapp_wc_order_statussen as $orderpickingapp_new_status => $orderpickingapp_new_name) {
                                                echo '<option value="' . esc_attr($orderpickingapp_new_status) . '" ' . selected($orderpickingapp_new_status, $orderpickingapp_selected_status, false) . '>' . esc_html($orderpickingapp_new_name) . '</option>';
                                            }
                                            ?>
                                        </select>
                                    </td>
                                </tr>
                            <?php endforeach; ?>
                            <tr>
                                <td class="opa-inline-017">No method (fallback)</td>
                                <td class="opa-inline-017">
                                    <select name="orderpickingapp_packing_status[default]">
                                        <option value="">No status change</option>
                                        <?php
                                        $orderpickingapp_selected_status = isset($orderpickingapp_order_status_mapping['default']) ? $orderpickingapp_order_status_mapping['default'] : '';
                                        foreach ($orderpickingapp_wc_order_statussen as $orderpickingapp_new_status => $orderpickingapp_new_name) {
                                            echo '<option value="' . esc_attr($orderpickingapp_new_status) . '" ' . selected($orderpickingapp_new_status, $orderpickingapp_selected_status, false) . '>' . esc_html($orderpickingapp_new_name) . '</option>';
                                        }
                                        ?>
                                    </select>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                        <div class="opa-inline-013">* Default we don't trigger a Woocommerce status change when picking completed only when both picking and packing are completed!</div>
                        <br/>

                        <div class="form-group">
                            <strong  class="opa-inline-016">Order prefix</strong>
                            <input type="text" class="opa-inline-015 form-control"  name="order_prefix" value="<?php echo esc_attr( ( isset( $orderpickingapp_app_settings['order_prefix'] ) && ! empty( $orderpickingapp_app_settings['order_prefix'] ) ) ? $orderpickingapp_app_settings['order_prefix'] : '' ); ?>">
                        </div>
                        <div class="opa-inline-013">* Add a custom prefix to orders</div>
                        <div class="form-group">
                            <strong  class="opa-inline-016">Picking date</strong>
                            <input type="text" class="opa-inline-015 pickingDate form-control" placeholder="YYYY-mm-dd" pattern="\d{4}-\d{2}-\d{2}"  name="pickingDate" value="<?php echo esc_attr( ( isset( $orderpickingapp_app_settings['pickingDate'] ) && ! empty( $orderpickingapp_app_settings['pickingDate'] ) ) ? $orderpickingapp_app_settings['pickingDate'] : '' ); ?>">
                        </div>
                        <div class="opa-inline-013">* Start picking orders from this date. Format: Year-month-day</div>

                        <?php
                        $orderpickingapp_location_field = get_option('orderpickingapp_location_field');
                        ?>
                        <strong class="opa-inline-014">Custom location field</strong><br/>
                        <select name="orderpickingapp_location_field">
                            <?php
                            echo '<option value="">Category (Default)</option>';
                            foreach( $orderpickingapp_all_meta_keys as $orderpickingapp_meta_key ){
                                echo '<option value="' . esc_attr( $orderpickingapp_meta_key ) . '" ' . selected( $orderpickingapp_meta_key, $orderpickingapp_location_field, false ) . '>' . esc_html( $orderpickingapp_meta_key ) . '</option>';
                            }
                            ?>
                        </select>
                        <br/>
                        <div class="opa-inline-013">* Default we use the category as location. You can select a custom field if you have a custom field for this.</div>

                        <?php
                        $orderpickingapp_ean_field = get_option('orderpickingapp_ean_field');
                        ?>
                        <strong class="opa-inline-014">Custom EAN field</strong><br/>
                        <select name="orderpickingapp_ean_field">
                            <?php
                            echo '<option value="_sku">SKU</option>';
                            echo '<option value="_global_unique_id">Product | GTIN, UPC, EAN of ISBN</option>';
                            foreach( $orderpickingapp_all_meta_keys as $orderpickingapp_meta_key ){
                                echo '<option value="' . esc_attr( $orderpickingapp_meta_key ) . '" ' . selected( $orderpickingapp_meta_key, $orderpickingapp_ean_field, false ) . '>' . esc_html( $orderpickingapp_meta_key ) . '</option>';
                            }
                            ?>
                        </select>
                        <br/>
                        <div class="opa-inline-013">* Default we use the SKU as barcode. You can select a custom field if you have a custom EAN field.</div>

                        <?php
                        $orderpickingapp_additional_barcode_field = get_option('orderpickingapp_additional_barcode_field');
                        ?>
                        <strong class="opa-inline-014">Additional barcode field / Box barcode</strong><br/>
                        <select name="orderpickingapp_additional_barcode_field">
                            <?php
                            echo '<option value="">Select field</option>';
                            foreach( $orderpickingapp_all_meta_keys as $orderpickingapp_meta_key ){
                                echo '<option value="' . esc_attr( $orderpickingapp_meta_key ) . '" ' . selected( $orderpickingapp_meta_key, $orderpickingapp_additional_barcode_field, false ) . '>' . esc_html( $orderpickingapp_meta_key ) . '</option>';
                            }
                            ?>
                        </select>
                        <br/>
                        <div class="opa-inline-013">* If you have multi barcodes for one product, for example if you work with single and in box products, you can select this additional field</div>

                        <?php
                        $orderpickingapp_additional_box_amount_field = get_option('orderpickingapp_additional_box_amount_field');
                        ?>
                        <strong class="opa-inline-014">Additional BOX amount field</strong><br/>
                        <select name="orderpickingapp_additional_box_amount_field">
                            <?php
                            echo '<option value="">Select field</option>';
                            foreach( $orderpickingapp_all_meta_keys as $orderpickingapp_meta_key ){
                                echo '<option value="' . esc_attr( $orderpickingapp_meta_key ) . '" ' . selected( $orderpickingapp_meta_key, $orderpickingapp_additional_box_amount_field, false ) . '>' . esc_html( $orderpickingapp_meta_key ) . '</option>';
                            }
                            ?>
                        </select>
                        <br/>
                        <div class="opa-inline-013">* Custom field with the amount of single products inside one BOX</div>

                        <h5>App layout</h5>
                        <div class="form-check">
                            <input type="hidden" name="hide_order_total" value="no">
                            <input type="checkbox" class="form-check-input" name="hide_order_total" value="yes" <?php echo ( (isset($orderpickingapp_app_settings['hide_order_total']) && $orderpickingapp_app_settings['hide_order_total'] == 'yes') )? 'checked' : ''; ?>>
                            <label class="form-check-label" for="yes">Hide order total</label>
                        </div>
                        <div class="form-check">
                            <input type="hidden" name="hide_product_description" value="no">
                            <input type="checkbox" class="form-check-input" name="hide_product_description" value="yes" <?php echo ( (isset($orderpickingapp_app_settings['hide_product_description']) && $orderpickingapp_app_settings['hide_product_description'] == 'yes') )? 'checked' : ''; ?>>
                            <label class="form-check-label" for="yes">Hide product description</label>
                        </div>
                        <div class="form-check">
                            <input type="hidden" name="hide_product_location" value="no">
                            <input type="checkbox" class="form-check-input" name="hide_product_location" value="yes" <?php echo ( (isset($orderpickingapp_app_settings['hide_product_location']) && $orderpickingapp_app_settings['hide_product_location'] == 'yes') )? 'checked' : ''; ?>>
                            <label class="form-check-label" for="yes">Hide product category/location</label>
                        </div>
                        <div class="form-check">
                            <input type="hidden" name="show_product_description" value="no">
                            <input type="checkbox" class="form-check-input" name="show_product_description" value="yes" <?php echo (isset($orderpickingapp_app_settings['show_product_description']) && $orderpickingapp_app_settings['show_product_description'] == 'yes')? 'checked' : ''; ?>>
                            <label class="form-check-label" for="show_product_description"><?php esc_html_e( 'Show product description on product list view', 'order-picking-app' ); ?></label>
                        </div>
                        <div class="form-check">
                            <input type="hidden" name="show_custom_order_field_in_list" value="no">
                            <input type="checkbox" class="form-check-input" name="show_custom_order_field_in_list" value="yes" <?php echo (isset($orderpickingapp_app_settings['show_custom_order_field_in_list']) && $orderpickingapp_app_settings['show_custom_order_field_in_list'] == 'yes')? 'checked' : ''; ?>>
                            <label class="form-check-label" for="show_custom_order_field_in_list"><?php esc_html_e( 'Show custom order field in picking list view. Default only inside the order detail page.', 'order-picking-app' ); ?></label>
                        </div>
                        <div class="form-check">
                            <input type="hidden" name="show_pdf_images" value="no">
                            <input type="checkbox" class="form-check-input" name="show_pdf_images" value="yes" <?php echo (isset($orderpickingapp_app_settings['show_pdf_images']) && $orderpickingapp_app_settings['show_pdf_images'] == 'yes')? 'checked' : ''; ?>>
                            <label class="form-check-label" for="show_pdf_images"><?php esc_html_e( 'Show images inside PDF picking list', 'order-picking-app' ); ?></label>
                        </div>

                        <h5>App functions</h5>
                        <div class="form-check">
                            <input type="hidden" name="enable_batch_order_select" value="no">
                            <input type="checkbox" class="form-check-input" name="enable_batch_order_select" value="yes" <?php echo (isset($orderpickingapp_app_settings['enable_batch_order_select']) && $orderpickingapp_app_settings['enable_batch_order_select'] == 'yes')? 'checked' : ''; ?>>
                            <label class="form-check-label" ><?php esc_html_e( 'Enable custom order select for batch picking. You can create your own picking list by custom selected orders inside the app', 'order-picking-app' ); ?></label>
                        </div>
                        <div class="form-check">
                            <input type="hidden" name="disable_inventory_update" value="no">
                            <input type="checkbox" class="form-check-input" name="disable_inventory_update" value="yes" <?php echo ( (isset($orderpickingapp_app_settings['disable_inventory_update']) && $orderpickingapp_app_settings['disable_inventory_update'] == 'yes') )? 'checked' : ''; ?>>
                            <label class="form-check-label" for="yes">Disable inventory updates within the app</label>
                        </div>
                        <div class="form-check">
                            <input type="hidden" name="disable_picking_list_view" value="no">
                            <input type="checkbox" class="form-check-input" name="disable_picking_list_view" value="yes" <?php echo ( (isset($orderpickingapp_app_settings['disable_picking_list_view']) && $orderpickingapp_app_settings['disable_picking_list_view'] == 'yes') )? 'checked' : ''; ?>>
                            <label class="form-check-label" for="yes">Disable picking list view and only load orders with manual entering an order number</label>
                        </div>
                        <div class="form-check">
                            <input type="hidden" name="enable_fast_picking" value="no">
                            <input type="checkbox" class="form-check-input" name="enable_fast_picking" value="yes" <?php echo ( (isset($orderpickingapp_app_settings['enable_fast_picking']) && $orderpickingapp_app_settings['enable_fast_picking'] == 'yes') )? 'checked' : ''; ?>>
                            <label class="form-check-label" for="yes">Enable fast picking directly from the order list without confirmation. Disabling the confirmation step may increase the risk of picking errors.</label>
                        </div>
                        <div class="form-check">
                            <input type="hidden" name="enable_fast_packing" value="no">
                            <input type="checkbox" class="form-check-input" name="enable_fast_packing" value="yes" <?php echo ( (isset($orderpickingapp_app_settings['enable_fast_packing']) && $orderpickingapp_app_settings['enable_fast_packing'] == 'yes') )? 'checked' : ''; ?>>
                            <label class="form-check-label" for="yes">Enable fast packing directly from the order list without confirmation</label>
                        </div>
                        <div class="form-check">
                            <input type="hidden" name="enable_packing_product_check" value="no">
                            <input type="checkbox" class="form-check-input" name="enable_packing_product_check" value="yes" <?php echo (isset($orderpickingapp_app_settings['enable_packing_product_check']) && $orderpickingapp_app_settings['enable_packing_product_check'] == 'yes')? 'checked' : ''; ?>>
                            <label class="form-check-label" for="enable_packing_product_check"><?php esc_html_e( 'Enable packing products check. All products has to be scanned/completed before you can completed the order', 'order-picking-app' ); ?></label>
                        </div>
                        <div class="form-check">
                            <input type="hidden" name="pre_picking_summary" value="no">
                            <input type="checkbox" class="form-check-input" name="pre_picking_summary" value="yes" <?php echo (isset($orderpickingapp_app_settings['pre_picking_summary']) && $orderpickingapp_app_settings['pre_picking_summary'] == 'yes')? 'checked' : ''; ?>>
                            <label class="form-check-label" for="pre_picking_summary"><?php esc_html_e( 'Enable the pre picking step with a list of all your open picking products. When enabled this will add a additional tab inside you app.', 'order-picking-app' ); ?></label>
                        </div>
                        <div class="form-check">
                            <input type="hidden" name="limit_stock_mutation" value="no">
                            <input type="checkbox" class="form-check-input" name="limit_stock_mutation" value="yes" <?php echo (isset($orderpickingapp_app_settings['limit_stock_mutation']) && $orderpickingapp_app_settings['limit_stock_mutation'] == 'yes')? 'checked' : ''; ?>>
                            <label class="form-check-label" for="limit_stock_mutation"><?php esc_html_e( 'Limit the stock mutation to a increment/decrement of 1', 'order-picking-app' ); ?></label>
                        </div>
                        <div class="form-check">
                            <input type="hidden" name="show_picking_timer" value="no">
                            <input type="checkbox" class="form-check-input" name="show_picking_timer" value="yes" <?php echo (isset($orderpickingapp_app_settings['show_picking_timer']) && $orderpickingapp_app_settings['show_picking_timer'] == 'yes')? 'checked' : ''; ?>>
                            <label class="form-check-label" for="show_picking_timer"><?php esc_html_e( 'Show timer when start picking an order. At this moment we don\'t save the time!', 'order-picking-app' ); ?></label>
                        </div>

                        <h5>NEW! Push notifications</h5>
                        <div class="form-check">
                            <input type="hidden" name="enable_order_push_notifications" value="no">
                            <input type="checkbox" class="form-check-input" name="enable_order_push_notifications" value="yes" <?php echo (isset($orderpickingapp_app_settings['enable_order_push_notifications']) && $orderpickingapp_app_settings['enable_order_push_notifications'] == 'yes')? 'checked' : ''; ?>>
                            <label class="form-check-label" ><?php esc_html_e( 'Enable push notifications when new order(s) are available for picking. All connected devices are receiving a push message.', 'order-picking-app' ); ?></label>
                        </div>
                        <br/>

                        <button id="orderpickingapp_reset_api_key" class="button opa-inline-012">Reset API key</button>
                        <button class="btn btn-primary submit_options opa-inline-008">Save</button>
                    </form>
                </div>
            </div>

            <div class="tab-pane fade" id="api_users" role="tabpanel">
                <div class="row justify-content-center">
                    <form method="post" class="orderpickingapp-users-wrap">
                        <h5>Users</h5>

                        <p class="orderpickingapp-users-intro">
                            Add all employees who will use the Order Picking App here. In the app you start by choosing a picker.
                            For picked orders/products, the relevant picker is noted in the order notes.
                        </p>

                        <?php
                        $orderpickingapp_noUsers = true;
                        if (isset($orderpickingapp_app_settings['app_users']) && !empty($orderpickingapp_app_settings['app_users']) && is_array($orderpickingapp_app_settings['app_users'])):
                            $i = count($orderpickingapp_app_settings['app_users']);

                            foreach ($orderpickingapp_app_settings['app_users'] as $orderpickingapp_app_user):

                                if( !isset($orderpickingapp_app_user['app_users_name']) && is_array($orderpickingapp_app_user) ){
                                    continue;
                                }

                                if (!isset($orderpickingapp_app_user['app_users_name'])) {
                                    $orderpickingapp_app_user = array(
                                        'app_users_name'           => $orderpickingapp_app_user,
                                        'app_users_password'       => '',
                                        'app_users_picking_amount' => '',
                                        'app_users_type'           => '',
                                        'app_users_start_time'     => '',
                                        'app_users_end_time'       => '',
                                        'app_users_force_scan_all' => 0,
                                    );
                                }

                                if (!isset($orderpickingapp_app_user['app_users_name']) || is_array($orderpickingapp_app_user['app_users_name'])) {
                                    continue;
                                }

                                $orderpickingapp_noUsers = false;
                                $i--;

                                $orderpickingapp_force_scan_all = isset($orderpickingapp_app_user['app_users_force_scan_all']) ? (int) $orderpickingapp_app_user['app_users_force_scan_all'] : 0;
                                ?>

                                <div class="orderpickingapp-user-card <?php echo ($i == 0) ? 'duplicate_row' : ''; ?>">
                                    <div class="orderpickingapp-user-grid">

                                        <div class="orderpickingapp-user-field">
                                            <label>Name</label>
                                            <input
                                                    type="text"
                                                    class="form-control app_users_name"
                                                    name="app_users[][app_users_name]"
                                                    value="<?php echo esc_attr($orderpickingapp_app_user['app_users_name']); ?>"
                                                    placeholder="Enter user name"
                                            />
                                        </div>

                                        <div class="orderpickingapp-user-field">
                                            <label>Password</label>
                                            <input
                                                    type="text"
                                                    class="form-control"
                                                    name="app_users[][app_users_password]"
                                                    value="<?php echo esc_attr($orderpickingapp_app_user['app_users_password']); ?>"
                                                    placeholder="<?php echo esc_attr__('Enter user password (optional)', 'order-picking-app'); ?>"
                                            />
                                        </div>

                                        <div class="orderpickingapp-user-field">
                                            <label>Start</label>
                                            <input
                                                    type="number"
                                                    min="0"
                                                    max="23"
                                                    step="1"
                                                    class="woocommerce-Input woocommerce-Input--text input-text"
                                                    name="app_users[][app_users_start_time]"
                                                    value="<?php echo esc_attr($orderpickingapp_app_user['app_users_start_time']); ?>"
                                                    placeholder="Start"
                                            />
                                        </div>

                                        <div class="orderpickingapp-user-field">
                                            <label>End</label>
                                            <input
                                                    type="number"
                                                    min="0"
                                                    max="23"
                                                    step="1"
                                                    class="woocommerce-Input woocommerce-Input--text input-text"
                                                    name="app_users[][app_users_end_time]"
                                                    value="<?php echo esc_attr($orderpickingapp_app_user['app_users_end_time']); ?>"
                                                    placeholder="End"
                                            />
                                        </div>

                                        <div class="orderpickingapp-user-field">
                                            <label>Picking</label>
                                            <select name="app_users[][app_users_picking_amount]">
                                                <?php if (isset($orderpickingapp_app_user['app_users_type']) && ($orderpickingapp_app_user['app_users_type'] == 'sales' || $orderpickingapp_app_user['app_users_type'] == 'inventory')): ?>
                                                    <option value="1" selected>-</option>
                                                <?php else: ?>
                                                    <option value="1" <?php selected(($orderpickingapp_app_user['app_users_picking_amount'] ?? '') == '1'); ?>>
                                                        Single order picking
                                                    </option>
                                                    <?php for ($x = 2; $x <= 20; $x++): ?>
                                                        <option value="<?php echo esc_attr($x); ?>" <?php selected(($orderpickingapp_app_user['app_users_picking_amount'] ?? '') == $x); ?>>
                                                            <?php echo esc_html($x); ?> orders
                                                        </option>
                                                    <?php endfor; ?>
                                                <?php endif; ?>
                                            </select>
                                        </div>

                                        <div class="orderpickingapp-user-field">
                                            <label>Type</label>
                                            <select class="form-select" name="app_users[][app_users_type]">
                                                <option value="" <?php selected(($orderpickingapp_app_user['app_users_type'] ?? '') == ''); ?>>Picker</option>

                                                <?php if ($orderpickingapp_app_settings['subscription']['pos_addon']): ?>
                                                    <option value="sales" <?php selected(($orderpickingapp_app_user['app_users_type'] ?? '') == 'sales'); ?>>Sales</option>
                                                <?php endif; ?>

                                                <?php if ($orderpickingapp_app_settings['subscription']['inventory_addon']): ?>
                                                    <option value="inventory" <?php selected(($orderpickingapp_app_user['app_users_type'] ?? '') == 'inventory'); ?>>Inventory</option>
                                                <?php endif; ?>

                                                <?php if (isset($orderpickingapp_app_settings['enable_delivery_list']) && $orderpickingapp_app_settings['enable_delivery_list'] == 'yes'): ?>
                                                    <option value="delivery" <?php selected(($orderpickingapp_app_user['app_users_type'] ?? '') == 'delivery'); ?>>Delivery</option>
                                                <?php endif; ?>
                                            </select>
                                        </div>

                                        <div>
                                            <span class="dashicons dashicons-trash remove_picker"></span>
                                        </div>

                                        <div class="orderpickingapp-user-field">
                                            <label class="orderpickingapp-force-scan">
                                                <input
                                                        type="checkbox"
                                                        name="app_users[][app_users_force_scan_all]"
                                                        value="1"
                                                    <?php checked($orderpickingapp_force_scan_all, 1); ?>
                                                />
                                                Force scan
                                            </label>
                                        </div>

                                    </div>
                                </div>

                            <?php endforeach; ?>
                        <?php endif; ?>

                        <?php if ($orderpickingapp_noUsers): ?>
                            <div class="orderpickingapp-user-card duplicate_row">
                                <div class="orderpickingapp-user-grid">

                                    <div class="orderpickingapp-user-field">
                                        <label>Name</label>
                                        <input type="text" class="form-control" name="app_users[][app_users_name]" value="" placeholder="Enter user name"/>
                                    </div>

                                    <div class="orderpickingapp-user-field">
                                        <label>Password</label>
                                        <input type="text" class="form-control" name="app_users[][app_users_password]" value="" placeholder="<?php echo esc_attr__('Enter user password (optional)', 'order-picking-app'); ?>"/>
                                    </div>

                                    <div class="orderpickingapp-user-field">
                                        <label>Start</label>
                                        <input type="number" min="0" max="23" step="1" class="woocommerce-Input woocommerce-Input--text input-text" name="app_users[][app_users_start_time]" value="" placeholder="Start"/>
                                    </div>

                                    <div class="orderpickingapp-user-field">
                                        <label>End</label>
                                        <input type="number" min="0" max="23" step="1" class="woocommerce-Input woocommerce-Input--text input-text" name="app_users[][app_users_end_time]" value="" placeholder="End"/>
                                    </div>

                                    <div class="orderpickingapp-user-field">
                                        <label>Picking</label>
                                        <select name="app_users[][app_users_picking_amount]">
                                            <option value="1">Single order picking</option>
                                            <?php for ($x = 2; $x <= 20; $x++): ?>
                                                <option value="<?php echo esc_attr($x); ?>"><?php echo esc_html($x); ?> orders</option>
                                            <?php endfor; ?>
                                        </select>
                                    </div>

                                    <div class="orderpickingapp-user-field">
                                        <label>Type</label>
                                        <select class="form-select" name="app_users[][app_users_type]">
                                            <option value="">Picker</option>

                                            <?php if ($orderpickingapp_app_settings['subscription']['pos_addon']): ?>
                                                <option value="sales">Sales</option>
                                            <?php endif; ?>

                                            <?php if ($orderpickingapp_app_settings['subscription']['inventory_addon']): ?>
                                                <option value="inventory">Inventory</option>
                                            <?php endif; ?>

                                            <?php if (isset($orderpickingapp_app_settings['enable_delivery_list']) && $orderpickingapp_app_settings['enable_delivery_list'] == 'yes'): ?>
                                                <option value="delivery">Delivery</option>
                                            <?php endif; ?>
                                        </select>
                                    </div>

                                    <div></div>

                                    <div class="orderpickingapp-user-field">
                                        <label class="orderpickingapp-force-scan">
                                            <input type="checkbox" name="app_users[][app_users_force_scan_all]" value="1"/>
                                            Force scan
                                        </label>
                                    </div>

                                </div>
                            </div>
                        <?php endif; ?>

                        <button class="button" id="add_app_user">Add</button>
                        <button class="btn btn-primary submit_options opa-inline-008">Save</button>
                    </form>
                </div>
            </div>

            <div class="tab-pane fade" id="shops" role="tabpanel">
                <div class="row justify-content-center">
                    <form method="post" class="opa-inline-011">
                        <div class="form-group">
                            <input type="text" class="form-control" name="connected_shops" value="<?php echo esc_attr( ( isset( $orderpickingapp_app_settings['connected_shops'] ) && ! empty( $orderpickingapp_app_settings['connected_shops'] ) ) ? $orderpickingapp_app_settings['connected_shops'] : '' ); ?>">
                            <i>* To bundle multiple Shopify stores inside Order Picking App, enter your unique API keys comma seperated. Do this for every Shopify store you have to connect to your existing Woocommerce/Prestashop store.</i>
                        </div>
                        <button class="btn btn-primary submit_options opa-inline-008">Save</button>
                    </form>
                </div>
            </div>

            <?php
            /*
             * Public display links.
             *
             * These four flat portal settings are the only source of truth:
             * - narrowcasting_access_token
             * - packing_access_token
             * - packing_allowed_ips
             * - packing_link_enabled
             */
            $orderpickingapp_subscription_id = absint(
                $orderpickingapp_app_settings['subscription']['id']
                ?? get_option( 'orderpickingapp_subscription_id' )
            );

            $orderpickingapp_account_url = 'https://orderpickingapp.com/mijn-account/';

            $orderpickingapp_narrowcasting_token = sanitize_text_field(
                $orderpickingapp_app_settings['narrowcasting_access_token'] ?? ''
            );

            $orderpickingapp_packing_token = sanitize_text_field(
                $orderpickingapp_app_settings['packing_access_token'] ?? ''
            );

            $orderpickingapp_packing_enabled = (
                ( $orderpickingapp_app_settings['packing_link_enabled'] ?? '' ) === 'yes'
            );

            $orderpickingapp_raw_packing_ips = $orderpickingapp_app_settings['packing_allowed_ips'] ?? '';

            if ( is_array( $orderpickingapp_raw_packing_ips ) ) {
                $orderpickingapp_packing_ips_text = implode(
                    "\n",
                    array_values(
                        array_filter(
                            array_map( 'sanitize_text_field', $orderpickingapp_raw_packing_ips )
                        )
                    )
                );
            } else {
                $orderpickingapp_packing_ips_text = sanitize_textarea_field(
                    (string) $orderpickingapp_raw_packing_ips
                );
            }

            $orderpickingapp_packing_ips = preg_split(
                '/[\s,;]+/',
                $orderpickingapp_packing_ips_text,
                -1,
                PREG_SPLIT_NO_EMPTY
            );

            $orderpickingapp_packing_ips = is_array( $orderpickingapp_packing_ips )
                ? array_values( array_filter( array_map( 'sanitize_text_field', $orderpickingapp_packing_ips ) ) )
                : array();

            try {
                $orderpickingapp_new_narrowcasting_token = $orderpickingapp_narrowcasting_token !== ''
                    ? $orderpickingapp_narrowcasting_token
                    : bin2hex( random_bytes( 32 ) );

                $orderpickingapp_new_packing_token = $orderpickingapp_packing_token !== ''
                    ? $orderpickingapp_packing_token
                    : bin2hex( random_bytes( 32 ) );
            } catch ( Exception $exception ) {
                $orderpickingapp_new_narrowcasting_token = '';
                $orderpickingapp_new_packing_token = '';
            }

            $orderpickingapp_narrowcasting_url = '';
            if ( $orderpickingapp_narrowcasting_token !== '' && $orderpickingapp_subscription_id ) {
                $orderpickingapp_narrowcasting_url = add_query_arg(
                    array(
                        'access' => $orderpickingapp_narrowcasting_token,
                        'shop'   => $orderpickingapp_subscription_id,
                    ),
                    'https://orderpickingapp.com/display/dashboard.html'
                );
            }

            $orderpickingapp_packing_url = '';
            if (
                $orderpickingapp_packing_enabled &&
                $orderpickingapp_packing_token !== '' &&
                $orderpickingapp_subscription_id
            ) {
                $orderpickingapp_packing_url = add_query_arg(
                    array(
                        'access' => $orderpickingapp_packing_token,
                        'shop'   => $orderpickingapp_subscription_id,
                    ),
                    'https://orderpickingapp.com/display/packing.html'
                );
            }

            function orderpickingapp_get_current_client_ip(): string
            {
                $ip = isset($_SERVER['REMOTE_ADDR'])
                    ? sanitize_text_field(wp_unslash($_SERVER['REMOTE_ADDR']))
                    : '';

                return filter_var($ip, FILTER_VALIDATE_IP)
                    ? $ip
                    : '';
            }
            $orderpickingapp_current_ip = orderpickingapp_get_current_client_ip();
            ?>
            <div class="tab-pane fade" id="packing-display" role="tabpanel">
                <div class="row justify-content-center">
                    <div class="opa-display-card">
                        <div class="opa-display-header">
                            <div>
                                <h4>Desktop packing</h4>
                                <p>Open the packing workspace on a warehouse computer without signing in to WordPress.</p>
                            </div>
                        </div>

                        <?php if ( ! empty( $orderpickingapp_packing_url ) ) : ?>
                            <div class="opa-display-row">
                                <label for="opaPackingUrl"><strong>Packing URL</strong></label>
                                <div class="opa-display-url-wrap">
                                    <input id="opaPackingUrl" type="text" readonly value="<?php echo esc_attr( $orderpickingapp_packing_url ); ?>">
                                    <button type="button" class="btn btn-primary opa-copy-display-url" data-target="opaPackingUrl" data-message="opaPackingCopyMessage">Copy link</button>
                                </div>
                                <div class="opa-display-copy-message" id="opaPackingCopyMessage">Link copied.</div>
                            </div>

                            <form class="opa-display-settings-form opa-display-row" data-success="Packing access saved.">
                                <input type="hidden" name="packing_access_token" value="<?php echo esc_attr( $orderpickingapp_packing_token ); ?>">
                                <input type="hidden" name="packing_link_enabled" value="yes">
                                <label for="opaPackingAllowedIps"><strong>Allowed IP addresses</strong></label>
                                <textarea id="opaPackingAllowedIps" class="form-control" name="packing_allowed_ips" rows="4" placeholder="One public IP address per line"><?php echo esc_textarea( $orderpickingapp_packing_ips_text ); ?></textarea>
                                <small class="opa-display-help">Enter one or more public IPv4 or IPv6 addresses, one per line.</small>
                                <div class="opa-display-actions">
                                    <?php if ($orderpickingapp_current_ip !== ''): ?>
                                        <button
                                                type="button"
                                                class="btn btn-secondary"
                                                id="addCurrentPackingIp"
                                                data-ip="<?php echo esc_attr(
                                                    $orderpickingapp_current_ip
                                                ); ?>"
                                        >
                                            Add current IP
                                        </button>
                                    <?php endif; ?>
                                    <button type="submit" class="btn btn-primary">Save access</button>
                                    <a class="btn btn-secondary" href="<?php echo esc_url( $orderpickingapp_packing_url ); ?>" target="_blank" rel="noopener noreferrer">Open packing</a>
                                </div>
                            </form>
                        <?php else : ?>
                            <div class="opa-display-notice">
                                No secure packing URL exists yet. Enter the warehouse public IP address and create the URL below.
                            </div>
                            <form class="opa-display-settings-form opa-display-row" data-success="Packing URL created.">
                                <input type="hidden" name="packing_access_token" value="<?php echo esc_attr( $orderpickingapp_new_packing_token ); ?>">
                                <input type="hidden" name="packing_link_enabled" value="yes">
                                <label for="packingAllowedIps"><strong>Allowed IP addresses</strong></label>
                                <textarea id="packingAllowedIps" class="form-control" name="packing_allowed_ips" rows="4" placeholder="One public IP address per line"><?php echo esc_textarea( $orderpickingapp_packing_ips_text ); ?></textarea>
                                <small class="opa-display-help">At least one allowed public IP address is recommended before creating the link.</small>
                                <div class="opa-display-actions">
                                    <?php if ($orderpickingapp_current_ip !== ''): ?>
                                        <button
                                                type="button"
                                                class="btn btn-secondary"
                                                id="addCurrentPackingIp"
                                                data-ip="<?php echo esc_attr(
                                                    $orderpickingapp_current_ip
                                                ); ?>"
                                        >
                                            Add current IP
                                        </button>
                                    <?php endif; ?>
                                    <button type="submit" class="btn btn-primary" <?php disabled( $orderpickingapp_new_packing_token === '' ); ?>>Create packing URL</button>
                                </div>
                            </form>
                        <?php endif; ?>
                    </div>
                </div>
            </div>

            <div class="tab-pane fade" id="display" role="tabpanel">
                <div class="row justify-content-center">
                    <div class="opa-display-card">
                        <div class="opa-display-header">
                            <div>
                                <h4>Order status dashboard</h4>
                                <p>Create a real-time narrowcasting dashboard for a warehouse or office screen.</p>
                            </div>

                            <?php if ( ! empty( $orderpickingapp_narrowcasting_url ) ) : ?>
                                <span class="opa-display-status enabled">Available</span>
                            <?php else : ?>
                                <span class="opa-display-status unavailable">Setup required</span>
                            <?php endif; ?>
                        </div>

                        <?php if ( ! empty( $orderpickingapp_narrowcasting_url ) ) : ?>
                            <div class="opa-display-row">
                                <label><strong>Dashboard options</strong></label>
                                <div class="opa-display-options">
                                    <div class="opa-display-option">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="hidePrice">
                                            <label class="form-check-label" for="hidePrice">Hide prices</label>
                                        </div>
                                        <small>Hide order totals from the dashboard.</small>
                                    </div>

                                    <div class="opa-display-option">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="showShipping">
                                            <label class="form-check-label" for="showShipping">Show shipping method</label>
                                        </div>
                                        <small>Show the shipping method on each order.</small>
                                    </div>
                                </div>
                            </div>

                            <div class="opa-display-row">
                                <label for="viewMode"><strong>View mode</strong></label>
                                <select class="form-select" id="viewMode">
                                    <option value="">2 columns</option>
                                    <option value="full">Full width</option>
                                </select>
                            </div>

                            <div class="opa-display-row">
                                <label for="bgValue"><strong>Background</strong></label>
                                <input type="text" class="form-control" id="bgValue" placeholder="HEX color or image URL, for example #f6f9ff">
                                <small class="opa-display-help">Enter a HEX color or a complete HTTP(S) image URL.</small>
                                <small class="opa-display-error" id="bgHelp">Enter a valid HEX color or HTTP(S) image URL.</small>
                            </div>

                            <div class="opa-display-row">
                                <label for="opaNarrowcastingUrl"><strong>Narrowcasting URL</strong></label>
                                <div class="opa-display-url-wrap">
                                    <input
                                            id="opaNarrowcastingUrl"
                                            type="text"
                                            readonly
                                            data-base="<?php echo esc_attr( $orderpickingapp_narrowcasting_url ); ?>"
                                            value="<?php echo esc_attr( $orderpickingapp_narrowcasting_url ); ?>"
                                    >
                                    <button type="button" class="btn btn-primary opa-copy-display-url" data-target="opaNarrowcastingUrl" data-message="opaNarrowcastingCopyMessage">Copy link</button>
                                </div>
                                <div class="opa-display-copy-message" id="opaNarrowcastingCopyMessage">Link copied.</div>
                            </div>

                            <div class="opa-display-row opa-display-actions">
                                <a class="btn btn-secondary" id="opaOpenNarrowcasting" href="<?php echo esc_url( $orderpickingapp_narrowcasting_url ); ?>" target="_blank" rel="noopener noreferrer">Open dashboard</a>
                            </div>
                        <?php else : ?>
                            <div class="opa-display-notice">
                                No secure narrowcasting URL exists yet. Create one here; it will be stored centrally in your Order Picking App account.
                            </div>
                            <form class="opa-display-settings-form opa-display-row" data-success="Narrowcasting URL created.">
                                <input type="hidden" name="narrowcasting_access_token" value="<?php echo esc_attr( $orderpickingapp_new_narrowcasting_token ); ?>">
                                <div class="opa-display-row opa-display-actions">
                                    <button type="submit" class="btn btn-primary" <?php disabled( $orderpickingapp_new_narrowcasting_token === '' ); ?>>Create narrowcasting URL</button>
                                </div>
                            </form>
                        <?php endif; ?>
                    </div>
                </div>
            </div>

            <script>
                (function () {
                    document.querySelectorAll('.opa-display-settings-form').forEach(function (form) {
                        form.addEventListener('submit', function (event) {
                            event.preventDefault();

                            var button = form.querySelector('button[type="submit"]');
                            var originalText = button ? button.textContent : '';
                            var data = [];

                            new FormData(form).forEach(function (value, name) {
                                data.push({ name: name, value: value });
                            });

                            if (button) {
                                button.disabled = true;
                                button.textContent = 'Saving...';
                            }

                            jQuery.ajax({
                                type: 'POST',
                                url: window.ajaxurl || (window.appData && appData.ajaxurl),
                                data: {
                                    action: 'save_app_settings',
                                    token: document.getElementById('token') ? document.getElementById('token').value : '',
                                    security: window.appData ? appData.nonce : '',
                                    data: data
                                },
                                dataType: 'json'
                            }).done(function (response) {
                                if (response && response.success === false) {
                                    alert(response.data && response.data.message ? response.data.message : 'Unable to save display access.');
                                    return;
                                }
                                window.location.reload();
                            }).fail(function () {
                                alert('Unable to save display access.');
                            }).always(function () {
                                if (button) {
                                    button.disabled = false;
                                    button.textContent = originalText;
                                }
                            });
                        });
                    });

                    function copyValue(input, message) {
                        if (!input || !input.value) return;

                        function showMessage() {
                            if (!message) return;
                            message.style.display = 'block';
                            window.setTimeout(function () {
                                message.style.display = 'none';
                            }, 2500);
                        }

                        if (navigator.clipboard && window.isSecureContext) {
                            navigator.clipboard.writeText(input.value).then(showMessage).catch(function () {
                                input.focus();
                                input.select();
                                document.execCommand('copy');
                                showMessage();
                            });
                            return;
                        }

                        input.focus();
                        input.select();
                        document.execCommand('copy');
                        showMessage();
                    }

                    document.querySelectorAll('.opa-copy-display-url').forEach(function (button) {
                        button.addEventListener('click', function () {
                            copyValue(
                                document.getElementById(button.getAttribute('data-target')),
                                document.getElementById(button.getAttribute('data-message'))
                            );
                        });
                    });

                    var urlInput = document.getElementById('opaNarrowcastingUrl');
                    var openButton = document.getElementById('opaOpenNarrowcasting');
                    var hidePrice = document.getElementById('hidePrice');
                    var showShipping = document.getElementById('showShipping');
                    var viewMode = document.getElementById('viewMode');
                    var background = document.getElementById('bgValue');
                    var backgroundHelp = document.getElementById('bgHelp');

                    if (!urlInput || !urlInput.getAttribute('data-base')) return;

                    function isHexColor(value) {
                        return /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/.test(value);
                    }

                    function isHttpUrl(value) {
                        try {
                            var parsed = new URL(value);
                            return parsed.protocol === 'http:' || parsed.protocol === 'https:';
                        } catch (error) {
                            return false;
                        }
                    }

                    function buildNarrowcastingUrl() {
                        var url = new URL(urlInput.getAttribute('data-base'));
                        var backgroundValue = background ? background.value.trim() : '';

                        if (hidePrice && hidePrice.checked) url.searchParams.set('price', 'hide');
                        else url.searchParams.delete('price');

                        if (showShipping && showShipping.checked) url.searchParams.set('shipping', 'show');
                        else url.searchParams.delete('shipping');

                        if (viewMode && viewMode.value) url.searchParams.set('view', viewMode.value);
                        else url.searchParams.delete('view');

                        if (backgroundValue) {
                            if (isHexColor(backgroundValue) || isHttpUrl(backgroundValue)) {
                                url.searchParams.set('background', backgroundValue);
                                if (backgroundHelp) backgroundHelp.style.display = 'none';
                            } else {
                                url.searchParams.delete('background');
                                if (backgroundHelp) backgroundHelp.style.display = 'block';
                            }
                        } else {
                            url.searchParams.delete('background');
                            if (backgroundHelp) backgroundHelp.style.display = 'none';
                        }

                        urlInput.value = url.toString();
                        if (openButton) openButton.href = url.toString();
                    }

                    [hidePrice, showShipping, viewMode].forEach(function (field) {
                        if (field) field.addEventListener('change', buildNarrowcastingUrl);
                    });

                    if (background) background.addEventListener('input', buildNarrowcastingUrl);
                    buildNarrowcastingUrl();
                })();
            </script>


            <div class="tab-pane fade" id="picklist" role="tabpanel">
                <button file_type="pdf" order_status="all" class="DownloadPicklist btn btn-primary"><?php esc_html_e( 'PDF picklist', 'order-picking-app' ); ?></button>
                <button file_type="pdf" order_status="backorders" class="DownloadPicklist btn btn-primary"><?php esc_html_e( 'PDF backorders', 'order-picking-app' ); ?></button>
                <button file_type="pdf" order_status="summary"  class="DownloadPicklist btn btn-primary"><?php esc_html_e( 'PDF order summary', 'order-picking-app' ); ?></button>
                <button file_type="csv" order_status="summary"  class="DownloadPicklist btn btn-primary"><?php esc_html_e( 'CSV order summary', 'order-picking-app' ); ?></button>
                <button file_type="pdf" order_status="products"  class="DownloadPicklist btn btn-primary"><?php esc_html_e( 'PDF product summary', 'order-picking-app' ); ?></button>
                <button file_type="csv" order_status="products"  class="DownloadPicklist btn btn-primary"><?php esc_html_e( 'CSV product summary', 'order-picking-app' ); ?></button>
            </div>

            <div class="tab-pane fade" id="analytics" role="tabpanel">
                <div class="ajaxContent">
                    <!-- AJAX HTML -->
                </div>

                <button id="loadAnalytics" data-token="<?php echo esc_js( $orderpickingapp_apikey ); ?>" class="btn btn-primary opa-inline-010"><?php esc_html_e( 'Load analytics', 'order-picking-app' ); ?></button>
            </div>

            <div class="tab-pane fade" id="api_account" role="tabpanel">
                <div class="row justify-content-center">
                    <table class="table">
                        <tbody>
                        <tr>
                            <td><?php esc_html_e( 'Trial', 'order-picking-app' ); ?></td>
                            <td><?php echo ( ! empty( $orderpickingapp_app_settings['subscription']['trial'] ) ) ? esc_html__( 'Yes', 'order-picking-app' ) : esc_html__( 'No', 'order-picking-app' ); ?></td>
                        </tr>
                        <tr>
                            <td><?php esc_html_e( 'Open trail days', 'order-picking-app' ); ?></td>
                            <td><?php echo esc_html( absint( $orderpickingapp_app_settings['subscription']['trial_days'] ) ); ?> </td>
                        </tr>
                        <tr>
                            <td><?php esc_html_e( 'Start date', 'order-picking-app' ); ?></td>
                            <td><?php echo esc_html( $orderpickingapp_app_settings['subscription']['created'] ); ?></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="tab-pane fade" id="pickingroute" role="tabpanel">
                <div class="row justify-content-center">
                    <form method="post">
                        <?php wp_nonce_field( 'orderpickingapp_settings_action', 'orderpickingapp_nonce' ); ?>
                        <h4><?php esc_html_e( 'Picking order', 'order-picking-app' ); ?></h4>
                        <select class="" name="pick_by">
                            <option value="category" <?php selected( empty( $orderpickingapp_app_settings['pick_by'] ) || ( isset( $orderpickingapp_app_settings['pick_by'] ) && 'category' === $orderpickingapp_app_settings['pick_by'] ) ); ?>>Category (Default)</option>
                            <option value="sku_asc" <?php selected( isset( $orderpickingapp_app_settings['pick_by'] ) ? $orderpickingapp_app_settings['pick_by'] : '', 'sku_asc' ); ?>>SKU (ASC)</option>
                            <option value="sku_desc" <?php selected( isset( $orderpickingapp_app_settings['pick_by'] ) ? $orderpickingapp_app_settings['pick_by'] : '', 'sku_desc' ); ?>>SKU (DESC)</option>
                            <option value="title_asc" <?php selected( isset( $orderpickingapp_app_settings['pick_by'] ) ? $orderpickingapp_app_settings['pick_by'] : '', 'title_asc' ); ?>>Title (ASC)</option>
                            <option value="title_desc" <?php selected( isset( $orderpickingapp_app_settings['pick_by'] ) ? $orderpickingapp_app_settings['pick_by'] : '', 'title_desc' ); ?>>Title (DESC)</option>
                            <option value="barcode_asc" <?php selected( isset( $orderpickingapp_app_settings['pick_by'] ) ? $orderpickingapp_app_settings['pick_by'] : '', 'barcode_asc' ); ?>>Barcode (ASC)</option>
                            <option value="barcode_desc" <?php selected( isset( $orderpickingapp_app_settings['pick_by'] ) ? $orderpickingapp_app_settings['pick_by'] : '', 'barcode_desc' ); ?>>Barcode (DESC)</option>
                            <option value="custom_field_asc" <?php selected( isset( $orderpickingapp_app_settings['pick_by'] ) ? $orderpickingapp_app_settings['pick_by'] : '', 'custom_field_asc' ); ?>>Product custom meta field (ASC)</option>
                            <option value="custom_field_desc" <?php selected( isset( $orderpickingapp_app_settings['pick_by'] ) ? $orderpickingapp_app_settings['pick_by'] : '', 'custom_field_desc' ); ?>>Product custom  meta field (DESC)</option>
                            <option value="order_custom_field_asc" <?php selected( isset( $orderpickingapp_app_settings['pick_by'] ) ? $orderpickingapp_app_settings['pick_by'] : '', 'order_custom_field_asc' ); ?>>Order custom meta field (ASC)</option>
                            <option value="order_custom_field_desc" <?php selected( isset( $orderpickingapp_app_settings['pick_by'] ) ? $orderpickingapp_app_settings['pick_by'] : '', 'order_custom_field_desc' ); ?>>Order custom  meta field (DESC)</option>
                        </select>

                        <br/>

                        <?php
                        if( empty($orderpickingapp_app_settings['pick_by']) || ( isset($orderpickingapp_app_settings['pick_by']) && $orderpickingapp_app_settings['pick_by'] == 'category') ): ?>
                            <p class="opa-inline-007"><?php esc_html_e( 'Drag the website categories into the correct order to get the most efficient walking route during order picking.', 'order-picking-app' ); ?></p>
                            <table id="pickingRoute" class="shop_table">
                                <?php
                                if (
                                    is_array($orderpickingapp_app_settings) &&
                                    !empty($orderpickingapp_app_settings['pickroute']) &&
                                    is_array($orderpickingapp_all_categories)
                                ):
                                    $orderpickingapp_pickroute = (array)$orderpickingapp_app_settings['pickroute'];

                                    // Fallback op oude structuur
                                    $first_item = reset($orderpickingapp_pickroute);

                                    if (!is_array($first_item)) {
                                        $orderpickingapp_structured_pickroute = [];

                                        foreach ($orderpickingapp_pickroute as $key => $route) {

                                            // Nieuwe/half-nieuwe structuur binnen oude structuur
                                            if (is_array($route)) {
                                                $orderpickingapp_structured_pickroute[$key] = $route;
                                                continue;
                                            }

                                            $parts = explode('/', (string) $route);

                                            if (count($parts) === 1) {
                                                $orderpickingapp_structured_pickroute[$parts[0]] = [];
                                            } elseif (count($parts) === 2) {
                                                $orderpickingapp_structured_pickroute[$parts[0]][$parts[1]] = [];
                                            } elseif (count($parts) === 3) {
                                                $orderpickingapp_structured_pickroute[$parts[0]][$parts[1]][] = $parts[2];
                                            }
                                        }

                                        $orderpickingapp_pickroute = $orderpickingapp_structured_pickroute;
                                    }

                                    foreach( $orderpickingapp_pickroute as $orderpickingapp_pickroute_main_category_id => $orderpickingapp_pickroute_children ):
                                        if( is_array($orderpickingapp_pickroute_children) ): ?>
                                            <tr class="main">
                                                <td><i class="opa-inline-009 fa-solid fa-up-down-left-right" ></i><input type="hidden" name="pickroute" value="<?php echo esc_attr( $orderpickingapp_pickroute_main_category_id ); ?>"/></td>
                                                <td>
                                                    <?php echo esc_html($orderpickingapp_all_categories[$orderpickingapp_pickroute_main_category_id]['name'] ?? ''); ?>
                                                </td>
                                                <td>
                                                    <table class="pickingSubRoute">
                                                        <?php
                                                        foreach( $orderpickingapp_pickroute_children as $orderpickingapp_pickroute_sub_category_id => $orderpickingapp_pickroute_sub_children ):

                                                        	if( is_array($orderpickingapp_pickroute_sub_children) ):
                                                                foreach( $orderpickingapp_pickroute_sub_children as $orderpickingapp_pickroute_sub_sub_category_key => $orderpickingapp_pickroute_sub_sub_category_id ):

                                                                	if( !is_numeric($orderpickingapp_pickroute_sub_sub_category_id) ){
                                                                		$orderpickingapp_pickroute_sub_sub_category_id = $orderpickingapp_pickroute_sub_sub_category_key;
                                                                	}

                                                                	// Location deleted
                                                                	if( !isset($orderpickingapp_all_categories[$orderpickingapp_pickroute_sub_category_id]['children'][$orderpickingapp_pickroute_sub_sub_category_id]) ){
                                                                		continue;
                                                                	}
                                                                	?>
                                                                    <tr class="sub sub_child">
                                                                        <td><i class="opa-inline-009 fa-solid fa-up-down-left-right" ></i><input type="hidden" name="pickroute" value="<?php echo esc_attr( $orderpickingapp_pickroute_main_category_id . '/' . $orderpickingapp_pickroute_sub_category_id . '/' . $orderpickingapp_pickroute_sub_sub_category_id ); ?>"/></td>
                                                                        <td><?php echo esc_html( $orderpickingapp_all_categories[ $orderpickingapp_pickroute_main_category_id ]['name'] . ' / ' . $orderpickingapp_all_categories[ $orderpickingapp_pickroute_main_category_id ]['children'][ $orderpickingapp_pickroute_sub_category_id ] . ' / ' . $orderpickingapp_all_categories[ $orderpickingapp_pickroute_sub_category_id ]['children'][ $orderpickingapp_pickroute_sub_sub_category_id ] ); ?></td>
                                                                    </tr>
                                                                    <?php
                                                                 		unset($orderpickingapp_all_categories[$orderpickingapp_pickroute_sub_category_id]['children'][$orderpickingapp_pickroute_sub_sub_category_id]);
                                                                endforeach;

                                                                // New/remaining categories
                                                                if( !empty($orderpickingapp_all_categories[$orderpickingapp_pickroute_sub_category_id]['children']) ){
                                                                    foreach( $orderpickingapp_all_categories[$orderpickingapp_pickroute_sub_category_id]['children'] as $orderpickingapp_pickroute_sub_sub_category_id ): ?>
                                                                        <tr class="sub">
                                                                            <td><i class="opa-inline-009 fa-solid fa-up-down-left-right" ></i><input type="hidden" name="pickroute" value="<?php echo esc_attr( $orderpickingapp_pickroute_main_category_id . '/' . $orderpickingapp_pickroute_sub_category_id . '/' . $orderpickingapp_pickroute_sub_sub_category_id ); ?>"/></td>
                                                                            <td>
                                                                                <?php
                                                                                echo esc_html(
                                                                                    $orderpickingapp_all_categories[ $orderpickingapp_pickroute_main_category_id ]['name'] .
                                                                                    ' / ' .
                                                                                    $orderpickingapp_all_categories[ $orderpickingapp_pickroute_main_category_id ]['children'][ $orderpickingapp_pickroute_sub_category_id ] .
                                                                                    ' / ' .
                                                                                    $orderpickingapp_pickroute_sub_sub_category_id .
                                                                                    ' ( unordered )'
                                                                                );
                                                                                ?>
                                                                            </td>
                                                                        </tr>
                                                                    <?php endforeach;
                                                                }

                                                                unset($orderpickingapp_all_categories[$orderpickingapp_pickroute_main_category_id]['children'][$orderpickingapp_pickroute_sub_category_id]);
                                                                ?>
                                                            <?php else: ?>
                                                                <tr class="sub child">
                                                                    <td><i class="opa-inline-009 fa-solid fa-up-down-left-right" ></i><input type="hidden" name="pickroute" value="<?php echo esc_attr( $orderpickingapp_pickroute_main_category_id . '/' . $orderpickingapp_pickroute_sub_category_id ); ?>"/></td>
                                                                    <td>
                                                                        <?php
                                                                        echo esc_html(
                                                                            $orderpickingapp_all_categories[ $orderpickingapp_pickroute_main_category_id ]['name'] .
                                                                            ' / ' .
                                                                            $orderpickingapp_all_categories[ $orderpickingapp_pickroute_main_category_id ]['children'][ $orderpickingapp_pickroute_sub_category_id ]
                                                                        );
                                                                        ?>
                                                                    </td>
                                                                </tr>
                                                            <?php endif; ?>

                                                            <?php
                                                            unset($orderpickingapp_all_categories[$orderpickingapp_pickroute_main_category_id]['children'][$orderpickingapp_pickroute_sub_category_id]);
                                                        endforeach;

                                                        // New/remaining categories
                                                        if( !empty($orderpickingapp_all_categories[$orderpickingapp_pickroute_main_category_id]['children']) ){
                                                            foreach( $orderpickingapp_all_categories[$orderpickingapp_pickroute_main_category_id]['children'] as $orderpickingapp_pickroute_sub_category_id => $orderpickingapp_pickroute_sub_category ): ?>
                                                                <tr class="sub">
                                                                    <td><i class="opa-inline-009 fa-solid fa-up-down-left-right" ></i><input type="hidden" name="pickroute" value="<?php echo esc_attr( $orderpickingapp_pickroute_main_category_id . '/' . $orderpickingapp_pickroute_sub_category_id ); ?>"/></td>
                                                                    <td><?php echo esc_html( $orderpickingapp_all_categories[ $orderpickingapp_pickroute_main_category_id ]['name'] . ' / ' . $orderpickingapp_pickroute_sub_category ); ?> <?php esc_html_e( '( unordered )', 'order-picking-app' ); ?></td>
                                                                </tr>
                                                            <?php endforeach;
                                                        }
                                                        ?>
                                                    </table>
                                                </td>
                                            </tr>
                                         <?php elseif( isset($orderpickingapp_all_categories[$orderpickingapp_pickroute_main_category_id]) ): ?>
                                            <tr class="main">
                                                <td><i class="opa-inline-009 fa-solid fa-up-down-left-right" ></i><input type="hidden" name="pickroute" value="<?php echo esc_attr( $orderpickingapp_pickroute_main_category_id ); ?>"/></td>
                                                <td><?php echo esc_html( $orderpickingapp_all_categories[ $orderpickingapp_pickroute_main_category_id ]['name'] ); ?></td>
                                                <td>-</td>
                                            </tr>
                                        <?php endif;
                                        unset($orderpickingapp_all_categories[$orderpickingapp_pickroute_main_category_id]);
                                    endforeach;

                                    // New/remaining categories
                                    if( !empty($orderpickingapp_all_categories) ):
                                        foreach( $orderpickingapp_all_categories as $orderpickingapp_pickroute_main_category_id => $orderpickingapp_pickroute_main_category ):

                                            if( !isset($orderpickingapp_pickroute_main_category['name']) ){
                                                continue;
                                            }

                                            if( isset($orderpickingapp_pickroute_main_category['children']) && !empty($orderpickingapp_pickroute_main_category['children']) ): ?>
                                                <tr class="main">
                                                    <td><i class="opa-inline-009 fa-solid fa-up-down-left-right" ></i><input type="hidden" name="pickroute" value="<?php echo esc_attr( $orderpickingapp_pickroute_main_category_id ); ?>"/></td>
                                                    <td><?php echo esc_html( $orderpickingapp_pickroute_main_category['name'] ); ?> ( unordered )</td>
                                                    <td>
                                                        <table class="pickingSubRoute">
                                                            <?php
                                                            foreach( $orderpickingapp_pickroute_main_category['children'] as $orderpickingapp_pickroute_sub_category_id => $orderpickingapp_pickroute_sub_category ):

                                                                if( isset($orderpickingapp_all_categories[$orderpickingapp_pickroute_sub_category_id]['children']) && !empty($orderpickingapp_all_categories[$orderpickingapp_pickroute_sub_category_id]['children']) ):
                                                                    foreach( $orderpickingapp_all_categories[$orderpickingapp_pickroute_sub_category_id]['children'] as $orderpickingapp_pickroute_sub_sub_category_id => $orderpickingapp_pickroute_sub_sub_category ): ?>
                                                                        <tr class="sub">
                                                                            <td><i class="opa-inline-009 fa-solid fa-up-down-left-right" ></i><input type="hidden" name="pickroute" value="<?php echo esc_attr( $orderpickingapp_pickroute_main_category_id . '/' . $orderpickingapp_pickroute_sub_category_id . '/' . $orderpickingapp_pickroute_sub_sub_category_id ); ?>"/></td>
                                                                            <td><?php echo esc_html( ( isset( $orderpickingapp_pickroute_main_category['name'] ) ? $orderpickingapp_pickroute_main_category['name'] : '-' ) . ' / ' . $orderpickingapp_pickroute_sub_category . ' / ' . $orderpickingapp_pickroute_sub_sub_category ); ?></td>
                                                                        </tr>
                                                                    <?php endforeach; ?>
                                                                </tr>
                                                                <?php else: ?>
                                                                    <tr class="sub">
                                                                        <td><i class="opa-inline-009 fa-solid fa-up-down-left-right" ></i><input type="hidden" name="pickroute" value="<?php echo esc_attr( $orderpickingapp_pickroute_main_category_id . '/' . $orderpickingapp_pickroute_sub_category_id ); ?>"/></td>
                                                                        <td><?php echo esc_html( ( isset( $orderpickingapp_pickroute_main_category['name'] ) ? $orderpickingapp_pickroute_main_category['name'] : '-' ) . ' / ' . $orderpickingapp_pickroute_sub_category ); ?></td>
                                                                    </tr>
                                                                <?php endif; ?>

                                                            <?php endforeach; ?>
                                                        </table>
                                                    </td>
                                                </tr>
                                            <?php else: ?>
                                                <tr class="main">
                                                    <td><i class="opa-inline-009 fa-solid fa-up-down-left-right" ></i><input type="hidden" name="pickroute" value="<?php echo esc_attr( $orderpickingapp_pickroute_main_category_id ); ?>"/></td>
                                                    <td><?php echo esc_html( $orderpickingapp_pickroute_main_category['name'] ); ?> ( unordered )</td>
                                                    <td>-</td>
                                                </tr>
                                            <?php endif; ?>
                                        <?php endforeach;
                                    endif;
                                else:
                                    if( !empty($orderpickingapp_all_categories) ):
                                        foreach( $orderpickingapp_all_categories as $orderpickingapp_pickroute_main_category_id => $orderpickingapp_pickroute_main_category ):
                                            if( !isset($orderpickingapp_pickroute_main_category['name']) || empty($orderpickingapp_pickroute_main_category['name']) ){
                                                continue;
                                            }
                                            if( isset($orderpickingapp_pickroute_main_category['children']) && !empty($orderpickingapp_pickroute_main_category['children']) ): ?>
                                                <tr class="main">
                                                    <td><i class="opa-inline-009 fa-solid fa-up-down-left-right" ></i><input type="hidden" name="pickroute" value="<?php echo esc_attr( $orderpickingapp_pickroute_main_category_id ); ?>"/></td>
                                                    <td><?php echo esc_html( $orderpickingapp_pickroute_main_category['name'] ); ?></td>
                                                    <td>
                                                        <table class="pickingSubRoute">
                                                            <?php
                                                            foreach( $orderpickingapp_pickroute_main_category['children'] as $orderpickingapp_pickroute_sub_category_id => $orderpickingapp_pickroute_sub_category ):

                                                                if( isset($orderpickingapp_all_categories[$orderpickingapp_pickroute_sub_category_id]['children']) && !empty($orderpickingapp_all_categories[$orderpickingapp_pickroute_sub_category_id]['children']) ):
                                                                    foreach( $orderpickingapp_all_categories[$orderpickingapp_pickroute_sub_category_id]['children'] as $orderpickingapp_pickroute_sub_sub_category_id => $orderpickingapp_pickroute_sub_sub_category ): ?>
                                                                        <tr class="sub">
                                                                            <td><i class="opa-inline-009 fa-solid fa-up-down-left-right" ></i><input type="hidden" name="pickroute" value="<?php echo esc_attr( $orderpickingapp_pickroute_main_category_id . '/' . $orderpickingapp_pickroute_sub_category_id . '/' . $orderpickingapp_pickroute_sub_sub_category_id ); ?>"/></td>
                                                                            <td>#<?php echo esc_html( ( isset( $orderpickingapp_pickroute_main_category['name'] ) ? $orderpickingapp_pickroute_main_category['name'] : '-' ) . ' / ' . $orderpickingapp_pickroute_sub_category . ' / ' . $orderpickingapp_pickroute_sub_sub_category ); ?></td>
                                                                        </tr>
                                                                    <?php endforeach; ?>
                                                                </tr>
                                                                <?php else: ?>
                                                                    <tr class="sub">
                                                                        <td><i class="opa-inline-009 fa-solid fa-up-down-left-right" ></i><input type="hidden" name="pickroute" value="<?php echo esc_attr( $orderpickingapp_pickroute_main_category_id . '/' . $orderpickingapp_pickroute_sub_category_id ); ?>"/></td>
                                                                        <td>#<?php echo esc_html( ( isset( $orderpickingapp_pickroute_main_category['name'] ) ? $orderpickingapp_pickroute_main_category['name'] : '-' ) . ' / ' . $orderpickingapp_pickroute_sub_category ); ?></td>
                                                                    </tr>
                                                                <?php endif; ?>

                                                            <?php endforeach; ?>
                                                        </table>
                                                    </td>
                                                </tr>
                                            <?php else: ?>
                                                <tr class="main">
                                                    <td><i class="opa-inline-009 fa-solid fa-up-down-left-right" ></i><input type="hidden" name="pickroute" value="<?php echo esc_attr( $orderpickingapp_pickroute_main_category_id ); ?>"/></td>
                                                    <td><?php echo esc_html( $orderpickingapp_pickroute_main_category['name'] ); ?></td>
                                                    <td>-</td>
                                                </tr>
                                            <?php endif; ?>
                                        <?php endforeach; ?>
                                    <?php endif; ?>
                                <?php endif; ?>
                            </table>
                        <?php endif; ?>

                        <?php if( empty($orderpickingapp_pickroute) && empty($orderpickingapp_all_categories) ):?>
                            <i>* There is no connection available with your webshop. Please check your credentials.</i>
                        <?php endif; ?>

                        <button class="btn btn-primary submit_options opa-inline-008">Save</button>
                    </form>
                </div>
            </div>

            <div class="tab-pane fade" id="logs" role="tabpanel">
                <div class="row justify-content-center">
                    <h5>Logs</h5>
                    <p class="opa-inline-007">This data is useful for our technical department if something goes wrong.</p>
                    <?php
                    if( isset($orderpickingapp_client_logs) && !empty($orderpickingapp_client_logs) ):

                        $i = 0;
                        foreach( $orderpickingapp_client_logs as $orderpickingapp_client_log_day => $orderpickingapp_client_day_logs ): ?>
                            <button class="btn btn-secondary opa-inline-006" type="button" data-bs-toggle="collapse" data-bs-target="#Day<?php echo esc_attr( $i ); ?>" aria-expanded="false" aria-controls="Day<?php echo esc_attr( $i ); ?>">
                                Date: <?php echo esc_html( $orderpickingapp_client_log_day ); ?>
                            </button>
                            <?php

                            foreach( $orderpickingapp_client_logs as $orderpickingapp_client_log_day => $orderpickingapp_client_day_logs ): ?>
                                <div class="collapse" id="Day<?php echo esc_attr( $i ); ?>">
                                    <div class="card card-body">
                                        <ul class="opa-inline-005">
                                            <?php
                                            foreach( $orderpickingapp_client_day_logs as $orderpickingapp_client_log ){
                                                echo '<li class="opa-inline-004">';
                                                echo '<strong class="opa-inline-003">';
                                                echo esc_html( $orderpickingapp_client_log['created'] );
                                                echo '</strong>';
                                                echo esc_html( $orderpickingapp_client_log['message'] );
                                                echo '</li>';
                                            }
                                            ?>
                                        </ul>
                                    </div>
                                </div>
                                <?php
                                $i++;
                            endforeach;

                        endforeach;
                    endif; ?>
                </div>
            </div>

        </div>
    <?php endif; ?>
</div>

<section class="integration-section opa-inline-002">
    <div class="container">
        <div class="row justify-content-center">
            <div class="fl-left">
                <a href="<?php echo esc_url( 'https://apps.apple.com/app/orderpickingapp/id6444366422' ); ?>" target="_blank" title="Install Order Picking App for IOS" class="mb-4 mb-lg-0 mb-xl-0 position-relative text-decoration-none connected-app-single border border-light border-2 rounded-custom d-block overflow-hidden p-5">
                    <div class="position-relative connected-app-content">
                        <div class="integration-logo bg-custom-light rounded-circle p-2 d-inline-block">
                            <img src="<?php echo esc_url( 'https://orderpickingapp.com/wp-content/uploads/2022/12/Logo-Apple.png' ); ?>" width="40" alt="Apple iOS" class="img-fluid">
                        </div>
                        <h5 class="opa-inline-001"><?php esc_attr_e( 'Apple iOS', 'order-picking-app' ); ?></h5>
                        <p class="mb-0 text-body"><?php esc_attr_e( 'The Orderpicking App is compatible with all versions of Apple iOS. Even on an iPad', 'order-picking-app' ); ?></p>
                    </div>
                    <span class="position-absolute integration-badge badge px-3 py-2 bg-primary-soft text-primary">Download the app</span>
                </a>
            </div>

            <div class="fl-right">
                <a href="<?php echo esc_url( 'https://play.google.com/store/apps/details?id=com.orderpickingapp.app'); ?>" target="_blank" title="<?php esc_attr_e( 'Install Order Picking App for Android', 'order-picking-app' ); ?>"  class="position-relative text-decoration-none connected-app-single border border-light border-2 rounded-custom d-block overflow-hidden p-5">
                    <div class="position-relative connected-app-content">
                        <div class="integration-logo bg-custom-light rounded-circle p-2 d-inline-block">
                            <img src="<?php echo esc_url( 'https://orderpickingapp.com/wp-content/uploads/2022/12/Logo-Android.png' ); ?>" width="40" alt="<?php esc_attr_e( 'Integration', 'order-picking-app' ); ?>" class="img-fluid">
                        </div>
                        <h5 class="opa-inline-001"><?php esc_attr_e( 'Google Android OS', 'order-picking-app' ); ?></h5>
                        <p class="mb-0 text-body"><?php esc_attr_e( 'The Orderpicking App is compatible with all versions of Android OS. Even on a tablet', 'order-picking-app' ); ?></p>
                    </div>
                    <span class="position-absolute integration-badge badge px-3 py-2 bg-danger-soft text-danger"><?php esc_attr_e( 'Download the app', 'order-picking-app' ); ?></span>
                </a>
            </div>
        </div>
    </div>
</section>