{extends file="[shared]/window.tpl"}

{block title}
    Pozice {$body.data.code}
{/block}

{block size}
    {if $body.acn =="edit"}
        width = 1220;
        height = 900;
    {/if}
{/block}

{block tabs}
    {windowTab id='flapLocations' label="Lokace {$body.data.code}"}
{/block}

{block tabsContent}
        <div id="flapLocations" class="tab-pane fade boxStatic">
            <div class="form-group">
                <div class="col-md-2 control-label">
                    <label>{'flapLocationsLabel'|translate}</label>
                </div>
                <div class="col-md-5">
                    <input type="text" data-location="location" {if $body.acn == 'edit'}disabled{/if} class="form-control input-sm" name="data[code]" maxlength="20" value="{$body.data.code}" placeholder="A1, A2, ..."/>
                </div>
            </div>

            <div class="form-group">
                <div class="col-md-2 control-label ">
                    <label>Mazat prázdné pozice</label>
                    <a class="help-tip" data-toggle="tooltip" title="Pokud počet kusů produktu na pozici klesne na nulu, smaže se přiřazení produktu k dané pozici."><i class="bi bi-question-circle"></i></a>
                </div>
                <div class="col-md-1">
                    {print_toggle name="delete_empty" value=$body.data.delete_empty}
                </div>
            </div>

            <div class="form-group">
                <div class="col-md-2 control-label">
                    <label>{'scoreMultiplier'|translate}</label>
                </div>
                <div class="col-md-1">
                    <input type="text" class="form-control input-sm" name="data[score_multiplier]" value="{$body.data.score_multiplier|default:1}"/>
                </div>
            </div>

            {if $body.acn == 'add'}
                <div class="form-group">
                    <div class="col-md-2 control-label">
                        <label>A</label>
                    </div>
                    <div class="col-md-1">
                        <input type="text" class="form-control input-sm" data-location="A" name="data[A]" maxlength="20" value="{$body.data.code}"/>
                    </div>

                    <div class="col-md-1 control-label">
                        <label>B</label>
                    </div>
                    <div class="col-md-1">
                        <input type="text" class="form-control input-sm" data-location="B" name="data[B]" maxlength="20" value="{$body.data.code}"/>
                    </div>

                    <div class="col-md-1 control-label">
                        <label>C</label>
                    </div>
                    <div class="col-md-1">
                        <input type="text" class="form-control input-sm" data-location="C" name="data[C]" maxlength="20" value="{$body.data.code}"/>
                    </div>

                    <div class="col-md-1 control-label">
                        <label>D</label>
                    </div>
                    <div class="col-md-1">
                        <input type="text" class="form-control input-sm" data-location="D" name="data[D]" maxlength="20" value="{$body.data.code}"/>
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-md-3 control-label">
                        <strong>Pozice se generují ve formátu:</strong>
                    </div>
                    <div class="col-md-3">
                        <input type="text" class="form-control input-sm" name="data[format]"
                               value="{literal}{Lokace}{A}-{B}-{C}-{D}{/literal}" disabled/>
                    </div>
                </div>

                <div id="positions-example" style="margin-top: 50px">
                    <div style="border-bottom: 1px solid rgba(0, 0, 0, 0.1);font-weight: bold;margin-bottom: 20px">Po uložení budou vygenerované pozice</div>
                    <div class="row">
                        <div class="col-md-2">
                            <strong>První pozice</strong>
                        </div>
                        <div class="col-md-2" data-first-position></div>
                    </div>
                    <div class="row">
                        <div class="col-md-2"></div>
                        <div class="col-md-2">.</div>
                    </div>
                    <div class="row">
                        <div class="col-md-2"></div>
                        <div class="col-md-2">.</div>
                    </div>
                    <div class="row">
                        <div class="col-md-2"></div>
                        <div class="col-md-2">.</div>
                    </div>
                    <div class="row">
                        <div class="col-md-2">
                            <strong>Poslední pozice</strong>
                        </div>
                        <div class="col-md-2" data-last-position></div>
                    </div>
                </div>

                <script>
                    var Locations = {
                        getInputs: function () {
                            var result = [];
                            $('[data-location]').each(function () {
                                var $input = $(this);

                                result[$input.data('location')] = $input.val();
                            });

                            return result;
                        },

                        getLastPosition: function () {
                            var inputs = this.getInputs(),
                                joinArray = [];

                            for (var input in inputs) {
                                if (inputs.hasOwnProperty(input)) {
                                    if (inputs[input] == '') {
                                        break;
                                    }

                                    joinArray.push(inputs[input]);
                                }
                            }

                            return joinArray.join('-');
                        },

                        getFirstPosition: function () {
                            var inputs = this.getInputs(),
                                joinArray = [];

                            for (var input in inputs) {
                                if (inputs.hasOwnProperty(input)) {
                                    if (inputs[input] == '') {
                                        break;
                                    }

                                    if (input == 'location') {
                                        joinArray.push(inputs[input]);
                                        continue;
                                    }

                                    joinArray.push(1);
                                }
                            }

                            return joinArray.join('-');
                        }
                    };

                    $(document).ready(function () {
                        $('[data-location]').on('input', function () {
                            $('[data-first-position]').text(Locations.getFirstPosition());
                            $('[data-last-position]').text(Locations.getLastPosition());
                        });
                    });
                </script>
            {/if}
        </div>
{/block}


