<style>
    .loader {
      border: 16px solid #f3f3f3; /* Light grey */
      border-top: 16px solid #3498db; /* Blue */
      border-radius: 50%;
      width: 120px;
      height: 120px;
      animation: spin 2s linear infinite;
      margin: auto; 
    }

    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    .tracking-body {
        text-align: center;
    }
    .package-menu, .package-filter {
        padding: 10px;
        margin: 2px;
        
    }
    .package-menu .btn {
        width: 100%;
    }
    .packaging-functions td {
        text-align: center;
        width: 50%;
        
    }
    .packaging-functions table{
        width: 50%;
        float: left;
        margin-bottom: 0px;
    }
    .packaging-functions td button, .packaging-functions td div,  .packaging-functions td a {
        width: 100%;
        margin-left: 5px;
        margin-right: 5px;
    }
    .packaging-functions td div svg, .packaging-navigation svg {
        width: 100%;
        height: 100%;
    }
    .packaging-navigation  a {
        margin: 15px 0;
    }
    .packaging-navigation .barcode {
        margin: 10px 0 0px 0;
    }
    
    .packaging-navigation .left button, .packaging-navigation .right .barcode {
        width: 45%;
        float: left;
    }
    .packaging-navigation .left .barcode, .packaging-navigation .right a {
        width: 45%;
        float: right;
    }
    .packaging-navigation {
        margin-top: 5px;
    }
    .order-detail {
        height: 100%;
    }
    .order-progress {
        text-align: center;
        font-size: 45px;
        color: #26B99A;
        font-weight: bold;
        margin-top: 5px
    }
    
    .order-top-detail {
        font-size: 18px;
        padding-top: 10px;
        color: #5A738E;
        background-color: #eaf4fa;
        padding-bottom: 10px;
    }
    hr {
        margin-top: 0px;
        margin-bottom: 0px;
    }
    .order-top-detail .order-number a {
        font-size: 26px;
        color: #26B99A;
        font-weight: bold;
    }
    .order-top-detail .order-number {
    
    }
    .order-top-detail .order-number span {
        font-weight: normal;
        font-size: 20px;
    }
    .order-contact, .order-payment {
        margin-top: 15px;
    }
    .order-delivery {
        margin-top: 15px;
    }
    .order-payment .true {
        color: #26B99A;
    }
    .order-payment .false {
        color: #ff6666;
    }
    .order-addresses div div {
        width: 100%;
        font-weight: bold;
        font-size: 17px;
    }
    .addresses-outer {
        background-color:  #ffe6e6;
        padding-bottom: 10px;
        padding-top: 10px;
    }
    .order-top-detail a i {
        padding-right: 8px;
    }
    .order-item {
        min-height: 70px;
        border-bottom: 2px solid lightgrey;
        display: flex;
    }
    .order-item .i1 {
        width: 6%;
    }
    .order-item .i2 {
        width: 12%;
    }
    .order-item .i3 {
        width: 18%;
    }
    .order-item .i4 {
        width: 24%;
    }
    .order-item .i5 {
        width: 28%;
    }
    .order-item .i6 {
        width: 36%;
    }
    .order-item .code,.order-item .ean  {
        font-size: 20px;
        margin-top: 20px;
    }
    .tile-stats {
        overflow: visible !important;
    }
    .order-item .image {
        padding-top: 2px;
    }
    .zoom {
        cursor: pointer;
    }
    .zoom:hover {
        transform: scale(5);
        transition-delay:0.3s;
    }
    .order-item .name {
        padding-top: 15px;
        font-size: 16px;
        font-weight: bold;
    }
    .order-item .name span {
        font-size: 16px;
        font-weight: normal;
    }

    .order-item .order-price {
        padding-top: 10px;
        font-size: 18px;
        
    }
    .order-item .order-price .bold {
        font-weight: bold;
    }
    .order-item .order-price span span {
        font-size: 13px;
        font-weight: normal;
    }
    .order-item .amount {
        padding-top: 0px;
        font-size: 30px;
        font-weight: bolder;
    }
    .order-item .amount span {
        font-size: 45px;
        font-weight: normal;
        position: relative;
        top: 6px
    }
    .order-item .amount .false {
        color: #ff6666;
    }
    .order-item .amount .true {
        color: #26B99A;
    }
    .order-item .amount .false:hover {
        color: #ff3333;
    }
    .order-item .amount .true:hover {
        color: #1a7f69;
    }
    .order-item .amount-inner {
        cursor: pointer;
        text-align: center;
    }
    .amount .packed-popover {
        color: #26B99A;
    }
    .order-item .action div {
        padding-top: 5px;
        float: right;
    }
    .order-item .action button .fa-minus {
        margin-top: 5px;
    }
    .order-item .action button {
        width: 25px;
        height: 25px;
        margin: 2px ;
        background-color: whitesmoke;
        border-radius: 3px;
        border: solid 1px grey;
    }
    .order-item .action button:hover {
        background-color:  #758ea3;
        color:white;
    }
    .order-item {
        margin-left: 20px;
        margin-right: 20px;
    }
    
    .same-address {
        padding-top: 0px;
    }
    .packaging-done-btn {
        padding: 5px;
        text-align: center;
        
    }
    .packaging-done-btn a {
        width: 100%;
    }
    .packed-information {
        text-align: center;
    }
    .packed-information h2 {
        color: #ff6666;
        font-weight: bolder;
        font-size: 28px;
    }
    .packed-information h4 {
        color: grey;
        font-size: 20px;
    }
    .packed-information h5 {
        color: grey;
        font-size: 18px;
    }
    
    .remarks-outer {
        min-height: 50px;
        background-color: #E0E0E0;
    }
    .customer-remark, .eshop-remark {
        margin-top: 10px;
        margin-bottom: 10px;
        background-color: #E0E0E0;
    }

    .customer-remark strong, .eshop-remark strong{
        font-size: 16px;
    }
    .eshop-remark-edit {
        display: none;
    }
    .eshop-remark-edit textarea {
        width: 100%;
    }

    #webcam-view {
        position: fixed;
        right: 20px;
        bottom: 20px;
        transform: scale(0.1);
        transform-origin: 100% 100%;
    }
    .hidden_address {
        display: none;
    }
    .hidden_address_minimal {
        height: 15px;
        text-align: center;
    }
    .hidden_address_minimal {
        cursor: pointer;
    }
    .hidden_address_minimal:hover {
        color:#5A738E;
    }


    @-webkit-keyframes heartBeat {
  0% {
    -webkit-transform: scale(0.1);
    transform: scale(0.1);
  }

  14% {
    -webkit-transform: scale(0.15);
    transform: scale(0.15);
  }

  28% {
    -webkit-transform: scale(0.1);
    transform: scale(0.1);
  }

  42% {
    -webkit-transform: scale(0.15);
    transform: scale(0.15);
  }

  70% {
    -webkit-transform: scale(0.1);
    transform: scale(0.1);
  }
}

@keyframes heartBeat {
  0% {
    -webkit-transform: scale(0.1);
    transform: scale(0.1);
  }

  14% {
    -webkit-transform: scale(0.15);
    transform: scale(0.15);
  }

  28% {
    -webkit-transform: scale(0.1);
    transform: scale(0.1);
  }

  42% {
    -webkit-transform: scale(0.15);
    transform: scale(0.15);
  }

  70% {
    -webkit-transform: scale(0.1);
    transform: scale(0.1);
  }
}

.heartBeat {
  -webkit-animation-name: heartBeat;
  animation-name: heartBeat;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}



    @media only screen and (max-width: 600px) {
        .packaging-functions table {
            margin-top: 0px;
            margin-bottom: 0px;
            width: 100%;
        }
        .barcode {
            display: none;
        }
        .packaging-functions button {
            white-space: normal ;
        }
        .packaging-navigation a {
            width: 100% !important;
        }
        .packaging-navigation .tile-stats {
            width: 50% !important;
        }
        .order-delivery {
            margin-top: 15px;
            
        }
        .order-top-detail {
            text-align: center;
        }
        .order-addresses {
            padding-top: 10px;
            padding-bottom: 10px;
        }

    }
<?php if($settings["settings"]["show_barcode_actions"] != "1"):?>
    .barcode{
        display: none;
    }
    .packaging-navigation .tile-stats {
        width: 15.45% !important;
        text-align: center;
    }

    .packaging-navigation .order-progress {
        width: 68.5% !important;
    }
    .packaging-navigation .right a{
        float: unset;
        width: auto;
    }
    .packaging-navigation .btn, .packaging-functions .btn {
        font-size: 17px;    
        padding: 15px;
    }
<?php endif; ?>
    
</style>
<script>
    var MD5_CODES = [];
</script>
<?php 
if($order["package_number"] != NULL && $order["package_number"] != "") $PACKAGE_ID = $order["package_number"];
else $PACKAGE_ID = $order["package_order_carrier_id"];

?>

<div class="row">
    <div class="col-xs-12 col-md-10">
        
        <div class="packaging-functions tile-stats row">
            <table class="table">
                <thead>
                <tbody>
                <tr>
                    <td>
                        <div class="barcode"><?=get_barcode("BRANI-BUTT1")?></div>
                        <?php if($settings["settings"]["button1_actions"] && $settings["settings"]["button1_actions"]["button_name"] != ""): ?>
                             
                             <?=anchor('package/packaging/eshop_id/'.$this->uri['eshop_id']."/do_action/button1_actions/order/".$order["order_code"],$settings["settings"]["button1_actions"]["button_name"] , 'class="btn btn-info" id="BRANI-BUTT1"')?>
                        <?php else: ?>
                            <?=anchor('package/packaging/eshop_id/'.$this->uri['eshop_id']."/do_action/button1_actions/order/".$order["order_code"],'Tlačítko 1' , 'disabled class="btn btn-info" id="BRANI-BUTT1"')?>
                        <?php endif; ?>
                    </td>
                    <td>
                        <div class="barcode"><?=get_barcode("BRANI-BUTT2")?></div>
                         <?php if($settings["settings"]["button2_actions"] && $settings["settings"]["button2_actions"]["button_name"] != ""): ?>
                            <?=anchor('package/packaging/eshop_id/'.$this->uri['eshop_id']."/do_action/button2_actions/order/".$order["order_code"],$settings["settings"]["button2_actions"]["button_name"] , 'class="btn btn-info" id="BRANI-BUTT2"')?>
                        <?php else: ?>
                            <?=anchor('package/packaging/eshop_id/'.$this->uri['eshop_id']."/do_action/button2_actions/order/".$order["order_code"],'Tlačítko 2' , 'disabled class="btn btn-info" id="BRANI-BUTT2"')?>
                        <?php endif; ?>
                    </td>
                </tr>
                </tbody>
            </table>
            <table class="table">
                
                <tbody>
                <tr>
                    <td>
                        <div class="barcode"><?=get_barcode("BRANI-CANCEL")?></div>
                         <?=anchor('package/packaging/eshop_id/'.$this->uri['eshop_id']."/do_action/cancel_packaging/order/".$order["order_code"],'Zrušit balení' , 'class="btn btn-info" id="BRANI-CANCEL"')?>
                    </td>
                    <td>
                        <div class="barcode"><?=get_barcode("BRANI-PHOTO")?></div>
                        <button class="btn btn-info" id="BRANI-PHOTO">Udělat FOTOGRAFII</button>
                    </td>
        
                </tr>
                </tbody>
            </table>
        </div>
    
    </div>
    <div class="col-md-2 col-xs-12 ">
        <div class="package-menu tile-stats">
            <?=anchor('package/list/eshop_id/'.$this->uri['eshop_id'],'Objednávky' , 'class="btn btn-primary"')?>
            <?=anchor('package/settings/eshop_id/'.$this->uri['eshop_id'],'Nastavení' , 'class="btn btn-primary"')?>
            <?=anchor('package/packaging_photos/eshop_id/'.$this->uri['eshop_id']."/order/".$order["order_code"],'Fotogalerie balení' , 'class="btn btn-dark"')?>
        </div>
    </div>
</div>
<div class="row packaging-navigation">
   
    <?php if(!isset($this->uri["order"])): ?>
    <div class="col-md-4 left tile-stats" >
        <div class="barcode"><?=get_barcode("BRANI-PREDOBJ")?></div>
        <?php if($this->uri["r"] == 0): ?>
            <?=anchor('package/packaging/eshop_id/'.$this->uri['eshop_id']."/r/".($this->uri["r"]),'Předchozí objednávka' , 'id="BRANI-PREDOBJ" class="btn btn-md btn-dark" disabled')?>
        <?php else: ?>
            <?=anchor('package/packaging/eshop_id/'.$this->uri['eshop_id']."/r/".($this->uri["r"]-1),'Předchozí objednávka' , 'id="BRANI-PREDOBJ" class="btn btn-md btn-dark"')?>
        <?php endif; ?>
        
    </div>
    <?php 
        $colors = $this->config->item("package_selected_colors");
        if(!isset($colors[$order["package_selected_number"]-1])) $colors[$order["package_selected_number"]-1] = "lightgrey";
        if(hexdec(substr($colors[$order["package_selected_number"]-1],1,2))+hexdec(substr($colors[$order["package_selected_number"]-1],3,2))+hexdec(substr($colors[$order["package_selected_number"]-1],5,2)) > 381) $text_color = "black"; else $text_color = "white"; 
    ?> 
    
    <div class="col-md-4 col-xs-12 order-progress" style="position: relative; top: -30px; max-height: 90px;">
        <span class="label label-default" style="margin-left: 10px; font-size: 28px;  border: 1px solid grey; background-color: <?=$colors[$order["package_selected_number"]-1]?>; color: <?=$text_color?>; margin-right: 10px;"><?=$order["package_selected_number"]?></span>
        <br>

        <?=$this->package_model->count_selected_orders($this->uri["eshop_id"], True)+$this->package_model->count_packed_selected_orders($this->uri["eshop_id"], True)?>/<?=$selected_counter?>

    </div>
    
    
    <div class="col-md-4  right tile-stats">
        <div class="barcode"><?=get_barcode("BRANI-DALSIOBJ")?></div>
        <?php if(($this->uri["r"]+1) == $selected_counter): ?>
            <?=anchor('package/packaging/eshop_id/'.$this->uri['eshop_id']."/r/".($this->uri["r"]),'Další objednávka' , 'id="BRANI-DALSIOBJ" class="btn btn-md btn-dark" disabled')?>
        <?php else: ?>
            <?=anchor('package/packaging/eshop_id/'.$this->uri['eshop_id']."/r/".($this->uri["r"]+1),'Další objednávka' , 'id="BRANI-DALSIOBJ" class="btn btn-md btn-dark"')?>
        <?php endif; ?>
    </div>
    <?php endif; ?>
</div>
<?php if($order["package_packed_date"] !== NULL): ?>
<div class="row packed-information">
    <h2>Objednávka již byla zabalena!</h2>
    <h4>Datum a čas balení: <?=$order["package_packed_date"]?></h4>
    <?php if($order["package_client_start"]["client_id"] != $order["package_client_end"]["client_id"]): ?>
        <h5>Začal balit: <?=$order["package_client_start"]["client_name"]?></h5>
        <h5>Dokončil balení: <?=$order["package_client_end"]["client_name"]?></h5>

    <?php else: ?>
        <h5>Zabalil: <?=$order["package_client_end"]["client_name"]?></h5>
    <?php endif; ?>
    <?=anchor($_SERVER['REQUEST_URI'].'/reset/'.$order["order_code"],'Resetovat zabalení' , 'class="btn btn-sm btn-danger"')?>


</div>

<?php endif; ?>

<div class="row order-detail tile-stats">
    <div class="col-md-12 order-top-detail">
    <div class="col-md-3 col-xs-12 order-number">
        
        <a href="<?=$order["data"]["adminUrl"]?>" target="_blank"><?=$order["order_code"]?></a> 
        <br>
        <span><?=$eshop_translate["statuses"][$order["order_status_id"]]?></span>
    </div>
    <div class="col-md-3 col-xs-12 order-contact">
        <a href="callto:<?=$order["data"]["phone"]?>"> <i class="fa fa-phone" aria-hidden="true"></i> <?=$order["data"]["phone"]?></a>
        <br>
        <a href="mailto:<?=$order["data"]["email"]?>"> <i class="fa fa-envelope" aria-hidden="true"></i> <?=$order["data"]["email"]?></a>
    </div>
    <div class="col-md-3 col-xs-12 order-delivery"><?=$eshop_translate["shippings"][$order["shipping_guid"]]?><br><span class="true">
        <?php if(isset($settings["settings"]["balikobot_user"]) && $settings["settings"]["balikobot_user"] != "" && isset($settings["settings"]["balikobot_key"]) && $settings["settings"]["balikobot_key"] != "" &&  $PACKAGE_ID != NULL &&  $PACKAGE_ID != ""): ?>
        <a href="#" data-toggle="modal" data-target="#tracking-modal">
        <?= $PACKAGE_ID?>
        </a>
        <?php else: ?>
            <?= $PACKAGE_ID?>
        <?php endif; ?>
        </span></div>
    <div class="col-md-3 col-xs-12 order-payment"><?=$eshop_translate["payments"][$order["billing_guid"]]?> <br><span class="true"><?=($order["order_paid"]=="1")?"Zaplaceno":"Nezaplaceno"?></span></div>
    </div>
    

    <hr class="col-md-11">
    <div class="col-md-12 addresses-outer">
        <?php if($settings["settings"]["hide_address"]): ?>
            <div  onclick="show_address();" class="col-md-12 col-xs-12 row order-addresses hidden_address_minimal show_btn">
                <span> Zobrazit adresu <i class="fa fa-caret-down" aria-hidden="true"></i></span>
            </div>

        <?php endif ?>
        <div class="col-md-6 col-xs-12 row order-addresses <?php if($settings["settings"]["hide_address"]) echo "hidden_address";?>">
            <div class="col-md-3">
                Fakturační adresa:
            </div>
            <div class="col-md-6 col-md-offset-1">
                <div class="name"><?=$order["data"]["billingAddress"]["fullName"]?></div>
                <div class="company"><?=$order["data"]["billingAddress"]["company"]?></div>
                <div class="ico"><?php if($order["data"]["companyId"]):?>IČ: <?=$order["data"]["companyId"]?> <?php endif;?></div>
                <div class="dic"><?php if($order["data"]["taxId"]): ?>DIČ: <?=$order["data"]["taxId"]?><?php endif; ?></div>
                <div class="street"><?=$order["data"]["billingAddress"]["street"]?> <?=$order["data"]["billingAddress"]["houseNumber"]?></div>
                <div class="street_more"><?=$order["data"]["billingAddress"]["additional"]?></div>
                <div class="city-psc"><?=$order["data"]["billingAddress"]["city"]?> <?=$order["data"]["billingAddress"]["zip"]?></div>
                <div class="country"><?=$country_codes[$order["data"]["billingAddress"]["countryCode"]]?> <?php if($order["data"]["billingAddress"]["regionName"]):?>(<?=$order["data"]["billingAddress"]["regionName"]?>)<?php endif;?></div>
            </div>
        </div>
        <div class="col-md-6 col-xs-12 row order-addresses <?php if($settings["settings"]["hide_address"]) echo "hidden_address";?>"">
            <div class="col-md-3">
                Doručovací adresa:
            </div>
            <?php if($order["data"]["deliveryAddress"]):?>
            <div class="col-md-6 col-md-offset-1">
                <div class="name"><?=$order["data"]["deliveryAddress"]["fullName"]?></div>
                <div class="company"><?=$order["data"]["deliveryAddress"]["company"]?></div>
                <div class="ico"><?php if($order["data"]["companyId"]):?>IČ: <?=$order["data"]["companyId"]?> <?php endif;?></div>
                <div class="dic"><?php if($order["data"]["taxId"]): ?>DIČ: <?=$order["data"]["taxId"]?><?php endif; ?></div>
                <<div class="street"><?=$order["data"]["deliveryAddress"]["street"]?> <?=$order["data"]["deliveryAddress"]["houseNumber"]?></div>
                <div class="street_more"><?=$order["data"]["deliveryAddress"]["additional"]?></div>
                <div class="city-psc"><?=$order["data"]["deliveryAddress"]["city"]?> <?=$order["data"]["billingAddress"]["zip"]?></div>
                <div class="country"><?=$order["data"]["deliveryAddress"]["countryCode"]?> <?php if($order["data"]["deliveryAddress"]["regionName"]):?>(<?=$order["data"]["billingAddress"]["regionName"]?>)<?php endif;?></div>
            </div>
            <?php else: ?>
            <div class="col-md-6 col-md-offset-1">
                <div class="same-address">Stejná jako fakturační</div>
            </div>
            
            <?php endif; ?>
        </div>
         <?php if($settings["settings"]["hide_address"]): ?>
            <div n onclick="hide_address();" class="col-md-12 col-xs-12 row order-addresses hidden_address hidden_address_minimal hide_btn">
                <span > Skrýt adresu <i class="fa fa-caret-up" aria-hidden="true"></i></span>
            </div>

        <?php endif ?>
    </div>
    <hr class="col-md-11">
    <div class="col-md-12 remarks-outer">
        <div class="col-md-6 col-xs-12 row customer-remark">
            <div class="col-md-3">
                Poznámka zákazníka:
            </div>
            <div class="col-md-6 col-md-offset-1">
               <strong><?=$order["data"]["notes"]["customerRemark"]?></strong>
            </div>
        </div>
        <div class="col-md-6 col-xs-12 row eshop-remark">
            <div class="col-md-3">
                Poznámka eshopu:
            </div>
            <div class="col-md-6 col-md-offset-1 eshop-remark-text">
                <strong><?=$order["data"]["notes"]["eshopRemark"]?></strong>
            </div>
            <div class="col-md-6 col-md-offset-1 eshop-remark-edit">
                <textarea class="form-input" name="eshop_remark"><?=$order["data"]["notes"]["eshopRemark"]?></textarea>
            </div>
            <div class="col-md-2 eshop-remark-text" style="font-size: 10px">
                <button type="button" class="btn btn-default" onclick="edit_remark();">Editovat</button>
            </div>
            <div class="col-md-2 eshop-remark-edit">
                <button type="button" class="btn btn-info" onclick="save_remark()">Uložit</button>
            </div>
        </div>
    </div>
    <hr class="col-md-11">
    <div class="col-md-12  order-items">
        <?php foreach ($order["data"]["items"] as $i):
            if(in_array($i["itemType"],["billing","shipping"])) continue;?>
        <div class="order-item" id="item-<?=md5($i["code"])?>">
            <script>MD5_CODES["<?=$i["code"]?>"] = "<?=md5($i["code"])?>";</script>
            <div class="code i3"><a href="<?=$i["product_detail"]["data"]["url"]?>" target="_blank"><?=$i["code"]?></a></div>
            <div class="ean i3"><?=$i["product_detail"]["data"]["variants"][0]["ean"]?></div>
            <div class="image i2">
                <img class="zoom" height="65" src="<?php if($i["product_detail"]["data"]["images"][0]["name"]) echo $image_prefix.$i["product_detail"]["data"]["images"][0]["name"];?>">
            </div>
            <div class="name i6">
                <?=$i["name"]?>
                <br>
                <span><?=$i["variantName"]?></span>
            </div>
            <?php if(!$settings["settings"]["hide_price"]): ?>
            <div class="order-price i3">
                <span class="bold"> <?=$i["itemPrice"]["withoutVat"]?> <span>Kč bez DPH</span></span>
                <br>
                <span class=""> <?=$i["itemPrice"]["withVat"]?> <span>Kč s DPH</span></span>
            </div>
            <?php endif; ?>
            <div class="amount i3 ">
                <?php $this->load->view("tools/package/packaging_counter", ["i" => $i]); ?>
            </div>
            <div class="action i2">
                <div>
                <button data-item-code="<?=$i["code"]?>" data-item-guid="<?=$i["productGuid"]?>" class="btn-item-plus"><i class="fa fa-plus" aria-hidden="true"></i></button>
                <br>
                <button data-item-code="<?=$i["code"]?>" data-item-guid="<?=$i["productGuid"]?>" class="btn-item-minus"><i class="fa fa-minus" aria-hidden="true"></i></button>
                </div>

            </div>
             <button data-minus='<?php if($i["amount"] <= count($i["packed"])) echo "true"; else echo "false"; ?>'  data-item-code="<?=$i["code"]?>" data-item-guid="<?=$i["productGuid"]?>" style="height: 35px; margin-top: 15px; margin-left: 5px;" class="btn btn-default btn-item-all-add">Vše</button>
            
        </div>
        <?php endforeach; ?>
        
    </div>

</div>
<div class="row">
    <div class="packaging-done-btn col-md-4 col-md-offset-4 tile-stats">
        <div class="barcode"><?=get_barcode("BRANI-PACKED")?></div>
        <?php if(!isset($this->uri["r"]) or ($this->uri["r"]+1) == $selected_counter): ?>
            <?=anchor('package/packaging/eshop_id/'.$this->uri['eshop_id'].'/packed/'.$order["order_code"],'ZABALENO' , 'id="BRANI-PACKED" class="btn btn-lg btn-success"')?>
        <?php else: ?>
            <?=anchor('package/packaging/eshop_id/'.$this->uri['eshop_id'].'/packed/'.$order["order_code"].'/r/'.($this->uri["r"]+1),'ZABALENO' , 'id="BRANI-PACKED" class="btn btn-lg btn-success"')?>
        <?php endif; ?>
    </div>
</div>
<div style="position: fixed;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);">
<input id="scanning-input" name="scan_code" style="opacity:0; width: 0px; overflow: hidden;">
</div>


<div id="webcam-view"></div>





<?php if(isset($settings["settings"]["balikobot_user"]) && $settings["settings"]["balikobot_user"] != "" && isset($settings["settings"]["balikobot_key"]) && $settings["settings"]["balikobot_key"] != "" &&  $PACKAGE_ID != NULL &&  $PACKAGE_ID != ""): ?>
<div id="tracking-modal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Sledování zásilky číslo <strong><?=$PACKAGE_ID?></strong> </h4>
      </div>
      <div class="modal-body tracking-body">
            <div class="loader"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Zavřít</button>
      </div>
    </div>

  </div>
</div>

<?php endif; ?>











<script>
    // zobrazeni adresy
    function show_address(){

        $(".hidden_address_minimal.show_btn").css("display", "none");
        $(".hidden_address").show();

    }
    // skryti adresy
    function hide_address(){

        $(".hidden_address").css("display", "none");
        $(".hidden_address_minimal").show();
        $(".hidden_address_minimal.hide_btn").css("display", "none");
        

    }
    // pokud je zobrazeno sledovani zasilky, tak robrazit data o ni
    $("#tracking-modal").on('show.bs.modal', function(){
        load_tracking_data();
    });

    function load_tracking_data(){
        $.ajax({
            url: "<?=base_url("package/get_balikobot_tracking/eshop_id/".$this->uri['eshop_id']."/package_id/".$PACKAGE_ID."/shipping/".$order["data"]["shipping"]["guid"]) ?>",
            type: 'GET',
            async: false,
            cache: false,
            timeout: 30000,
            error: function(){
                return true;
            },
            success: function(msg){ 
                $(".tracking-body").html(msg);
            }
        });

    }


    var PACKAGE_SETTINGS = JSON.parse('<?=json_encode($settings["settings"])?>');
    console.log(PACKAGE_SETTINGS);
    var cursorFocus = function(elem) {
        var x = window.scrollX, y = window.scrollY;
        elem.focus();
        window.scrollTo(x, y);
    }
    $(document).ready(function() {
        $("[data-toggle=popover]").popover();
        $(window).click(function() {
            $("[data-toggle=popover]").popover("hide");
        });
        $('body').on('click', '.popover.fade', function(e) {
            e.stopPropagation();
        });
        $('body').on('click', '[data-toggle=popover]', function(event) {

            $("[data-toggle=popover]").not(this).popover("hide");
            $(this).popover("toggle");
            event.stopPropagation();
        });
    });
    var ORDER_ITEMS = JSON.parse('<?=$order_items_json?>');
    var ORDER_PACKED_ITEMS = JSON.parse('<?=$order_packed_json?>');
    var ORDER_ITEMS_EAN_TO_CODE = JSON.parse('<?=$order_items_ean_to_code?>');
    //Only for Mobile version
    if(window.outerWidth < 425) {
        $(".package-menu").insertBefore(".packaging-functions");
        $(".order-progress").insertAfter(".packaging-navigation .right");
    }
    // sledovani klaves sipky dole a doprava a dle nich prepinat mezi objednavkama
    $(document).keydown(function(e) {
        switch(e.which) {
            case 37: // left
                var href = $('#prev-btn').attr('href');
                window.location.href = href;
                break;

            case 38: // up
                break;

            case 39: // right
                var href = $('#next-btn').attr('href');
                window.location.href = href;
                break;

            case 40: // down
                break;

            default: return; // exit this handler for other keys
        }
        e.preventDefault(); // prevent the default action (scroll / move caret)
    });

    // odchytavani skenu a v pripade ze neni focus v jinem poli, vlozit text do skryteho a zpracovat
    $(document).keypress(function (e) {

        if(e.which == 13) {
            console.log("zde");
            $("#scanning-input").blur();
            $("#scanning-input").trigger("scan");
            return false;
        }
        var focused = $('input:focus');
        var focused2 = $('textarea:focus');
        if (typeof focused[0] == 'undefined' && typeof focused2[0] == 'undefined') {
            if (e.which !== 0) {
                $("#scanning-input").focus();
                $("#scanning-input").select();

                
            }
        }
    });
  
    $(document).bind('paste', function (e){
        var focused = $('input:focus');
        var focused2 = $('textarea:focus');
        if (typeof focused[0] == 'undefined' && typeof focused2[0] == 'undefined') {

            if (e.which !== 0) {
                $("#scanning-input").focus();
                $("#scanning-input").select();
            }
        }
    });
    // pri eventu "scan" zpracovat naskenovany retezec ze skryteho pole
    $("#scanning-input").on( "scan", function(e) {
        var value = $("#scanning-input").val();
        $("#scanning-input").val('');
        console.log(value);
        if(value.includes("BRANI-")){
            resolve_scan_action(value);
        }else{
            add_packed_item(value);
        }
    });

    $(".btn-item-plus").click(function(){
        var item_code = $(this).data("item-code");
        var item_guid = $(this).data("item-guid");
        add_packed_item(item_code,item_guid );
    });

    $(".btn-item-all-add").click(function(){
        var item_code = $(this).data("item-code");
        var item_guid = $(this).data("item-guid");
        var minus = $(this).data("minus");
        if( ORDER_ITEMS[item_code] <= ORDER_PACKED_ITEMS[item_code]){
            add_packed_item_all(item_code,item_guid, "minus");
        }else{
            add_packed_item_all(item_code,item_guid );
        }
        
        
    });
    $(".btn-item-all-minus").click(function(){
        console.log("minuuuuus");
        var item_code = $(this).data("item-code");
        var item_guid = $(this).data("item-guid");
        add_packed_item_all(item_code,item_guid, "minus" );
        var elem = $(this);
        elem.removeClass('btn-item-all-minus').addClass('btn-item-all-add');
    });
    $(".btn-item-minus").click(function(){
        var item_code = $(this).data("item-code");
        var item_guid = $(this).data("item-guid");
        add_packed_item(item_code,item_guid, "minus");
    });
    function add_packed_item_all(code,guid, type) {
        if(type == "minus"){
             $.ajax({
                type: "POST",
                url: "<?=base_url("package/ajax_add_packed/eshop_id/".$this->uri["eshop_id"]."/order/".$order["order_code"])?>",
                data: {"item_code": code, "item_guid": guid, "all_minus": ORDER_PACKED_ITEMS[code] },
                success: function (data) { 
                    data = JSON.parse(data);
                    ORDER_PACKED_ITEMS[code] -= ORDER_PACKED_ITEMS[code];
                    $("#item-"+MD5_CODES[code]+" div.amount").html(data["html"]);
                }
            });
        }else{
            $.ajax({
                type: "POST",
                url: "<?=base_url("package/ajax_add_packed/eshop_id/".$this->uri["eshop_id"]."/order/".$order["order_code"])?>",
                data: {"item_code": code, "item_guid": guid, "all_add": ORDER_ITEMS[code]-ORDER_PACKED_ITEMS[code] },
                success: function (data) {
                    data = JSON.parse(data);
                    ORDER_PACKED_ITEMS[code] += ORDER_ITEMS[code]-ORDER_PACKED_ITEMS[code];
                    $("#item-"+MD5_CODES[code]+" div.amount").html(data["html"]);
                }
            });

        }
    }
    // pridani kompletovaneho produktu
    function add_packed_item(code,guid, type) {
        if(typeof ORDER_ITEMS[code] === 'undefined') {
            if(typeof ORDER_ITEMS_EAN_TO_CODE[code] !== 'undefined'){
                code = ORDER_ITEMS_EAN_TO_CODE[code];
            }
        }
        console.log(code);
        if(typeof ORDER_ITEMS[code] === 'undefined') {
            console.log("ERROR: produkt "+code+" není v objednávce!")
            alert("ERROR: produkt "+code+" není v objednávce!");
        }else if(type == "minus"){
                $.ajax({
                type: "POST",
                url: "<?=base_url("package/ajax_add_packed/eshop_id/".$this->uri["eshop_id"]."/order/".$order["order_code"])?>",
                data: {"item_code": code, "item_guid": guid, "minus": "1"},
                success: function (data) {
                    data = JSON.parse(data);
                    
                    ORDER_PACKED_ITEMS[code] -= 1;
                    if(ORDER_PACKED_ITEMS[code] < 0) ORDER_PACKED_ITEMS[code] = 0;
                    $("#item-"+MD5_CODES[code]+" div.amount").html(data["html"]);
                }
            });
        } else if(ORDER_ITEMS[code] == ORDER_PACKED_ITEMS[code]){
            console.log("ERROR: již bylo dosaženo potřebného množství!")
            alert("ERROR: již bylo dosaženo potřebného množství!");
        }
        else {
                $.ajax({
                type: "POST",
                url: "<?=base_url("package/ajax_add_packed/eshop_id/".$this->uri["eshop_id"]."/order/".$order["order_code"])?>",
                data: {"item_code": code, "item_guid": guid},
                success: function (data) {
                    data = JSON.parse(data);
                    ORDER_PACKED_ITEMS[code] += 1;
                    $("#item-"+MD5_CODES[code]+" div.amount").html(data["html"]);
                    if(PACKAGE_SETTINGS["photo_on_item_scan"] == "1") {
                        take_photo("ITEM-SCAN",data["id"]);
                    }
                }
            });
        }
    }

    // aktualizace pocitadla zabalenych objednavek
    function reload_packed_counter(code) {
        $.ajax({
            type: "POST",
            url: "<?=base_url("package/ajax_reload_packed/eshop_id/".$this->uri["eshop_id"]."/order/".$order["order_code"])?>",
            data: {"item_code": code},
            success: function (data) {
                ORDER_PACKED_ITEMS[code] += 1;
                $("#item-"+code+" div.amount").html(data);
            }
        });
    }
    // zobrazeni aditace poznamky
    function edit_remark(){
        $(".eshop-remark-text").hide();
        $(".eshop-remark-edit").show();
    }
    
    // ulozeni poznamky
    function save_remark(){
        var new_remark = $(".eshop-remark-edit textarea").val();
        $(".eshop-remark-text").show();
        $(".eshop-remark-edit").hide();
        $(".eshop-remark-text strong").text(new_remark);
        $.post("<?=base_url("package/ajax_save_remark/eshop_id/".$this->uri["eshop_id"]."/order/".$order["order_code"])?>", data={"eshop_remark": new_remark});
        
    }
    // na dvojte kliknuti editovat poznamku
    $(".eshop-remark-text").dblclick(function () {
        edit_remark()
    });
    // provedeni akce naskenovaneho tlacitka
    function resolve_scan_action(action) {
 
         $("#"+action).click();
        
    }

    $(".btn").click(function(e){
        var id = $(this).attr("id");
        if(id == undefined) return;
        var ret = true;
        if (id.indexOf("BRANI-") >= 0){
            switch(id) {
              case "BRANI-BUTT1":
                console.log("but1");

                break;
              case "BRANI-BUTT2":
                console.log("but2");
                break;
              case "BRANI-PHOTO":
                take_photo(id);
                break;
              case "BRANI-CANCEL":
                console.log("cancel");
                break;
              case "BRANI-PACKED":
                if(PACKAGE_SETTINGS["packaging_finish_actions"]["incomplete_alert"] == "1"){

                    $.ajax({
                         async: false,
                         type: 'GET',
                         url: '<?=base_url("package/ajax_completed_packed_check/eshop_id/".$this->uri["eshop_id"]."/order/".$order["order_code"])?>',
                         success: function(data) {
                            if(data == "false"){
                                if(!confirm("Všechny produkty nejsou zkompletovány! Opravdu chcete objednávku zabalit bez kompletních produktů?")){
                                    console.log("zde2");
                                    ret = false;
                                }
                            }
                        }
                    });
                }
                if(ret){
                    if(PACKAGE_SETTINGS["photo_on_finish"] == "1"){
                        take_photo(id);
                    }
                }
                break;
            }
        }
        if(ret){
            var href = $(this).attr("href");
            if(href !== undefined){
                window.location = href;
            }
        }
        return ret;
    });


// obsluha webkamery a jeji inicializace
Webcam.set({
  width: 1280,
  height: 720,
  image_format: 'jpeg',
  jpeg_quality: 90,
  video: { facingMode: { exact: "environment" } }
 });
 Webcam.attach( '#webcam-view' ); // vystup webkamery zobrazovat v pravem spodnim rohu
 Webcam.on( 'error', function(err) {
    console.log(err);
} );
 // porizeni snimku z webkamery a jeji odeslani ke zpracovani
 function take_photo(photo_type, custom_id="0"){
    if(photo_type == undefined) photo_type = "undefined"
    
    $('#webcam-view').addClass("heartBeat").on("animationend", function(){
      $(this).removeClass('heartBeat');
      Webcam.attach( '#webcam-view' );
    });
    Webcam.snap( function(data_uri) {
        $('#webcam-view').html('<img src="'+data_uri+'"/>');
        console.log(data_uri);
        var obj = document.createElement("audio");
        obj.src = "/assets/cam_capture.wav"; 
        obj.play(); 

        var url = "<?=base_url("package/ajax_save_photo/eshop_id/".$this->uri["eshop_id"]."/order/".$order["order_code"]."/type/")?>"+photo_type+"/custom_id/"+custom_id;                
    
        $.ajax({
              url:url,
              // send the base64 post parameter
              data:{
                base64: data_uri
              },
              // important POST method !
              type:"post",
              complete:function(){
                console.log("Saved");
              }
            });

         });
     }
</script>