{% extends 'simple.html.twig' %}
{% block title %}{% trans %}Αναζήτηση{% endtrans %}{% endblock %}
{% block content %}
    <div id="app" class="{{ containerClass }}">
        <div class="row">
            <div class="col">
                <p class="h5 p-1 mt-2 mb-2 infoboxBlue">{% trans %}Αναζήτηση{% endtrans %}</p>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <div class="infoboxGray p-3">
                    <b-alert :show="showError" variant="danger"><p class="h6">${ errorMessage }$</p></b-alert>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <div class="infoboxGray p-3">
                    <div class="row">
                        <div class="col">
                            <b-form-input @keyup.enter="enterClicked()"  v-model="scannedBarcode" ref="barcode" placeholder="{% trans %}Σκάναρε το Barcode{% endtrans %}"></b-form-input>
                        </div>
                        <div class="col">
                            <b-button :disabled="invalidInput" variant="primary" v-on:click="okClicked">{% trans %}OK{% endtrans %}</b-button>
                        </div>
                    </div>

                    <template v-if="boxObject">
                        <div class="row mt-5">
                            <div class="col">
                                <p class="h5 text-center infoboxBlue">{% trans %}IB{% endtrans %}</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col">
                                <p><span class="text-info">ID:</span> ${ boxObject.id }$</p>
                                <p><span class="text-info">Barcode:</span> ${ boxObject.barcode }$</p>
                                <p v-if="boxObject.crate !== null"><span class="text-info">Crate:</span> 
                                    <a href="#" variant="link" @click.prevent="visit(boxObject.crate.barcode) ">
                                        ${ boxObject.crate.barcode }$
                                    </a>
                                </p>
                                <p v-if="boxObject.crate === null"><span class="text-info">Crate:</span> 
                                    Το IB δεν έχει ανατεθεί σε crate
                                </p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col">
                                <p class="h5 text-center">{% trans %}Περιεχόμενα{% endtrans %}</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col">
                                <table class="table table-dark table-hover table-condensed table-striped">
                                    <thead>
                                        <tr>
                                            <td>{% trans %}ID{% endtrans %}</td>
                                            <td>{% trans %}SKU{% endtrans %}</td>
                                            <td>{% trans %}BARCODE{% endtrans %}</td>
                                            <td>{% trans %}Amount{% endtrans %}</td>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr v-for="(b, index) in this.boxObject.products">
                                            <td>${ b.product.id }$</td>
                                            <td>${ b.product.sku }$</td>
                                            <td>
                                                <a href="#" variant="link" @click.prevent="visit(b.product.barcode)">
                                                    ${ b.product.barcode }$
                                                </a>
                                            </td>
                                            <td>${ b.amount }$</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </template>

                    <template v-if="crateObject">
                        <div class="row mt-5">
                            <div class="col">
                                <p class="h5 text-center infoboxBlue">{% trans %}Crate{% endtrans %}</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col">
                                <p><span class="text-info">ID:</span> ${ crateObject.id }$</p>
                                <p><span class="text-info">Barcode:</span> ${ crateObject.barcode }$</p>
                                <p v-if="crateObject.rackPosition === null"><span class="text-info">Θέση:</span> Δεν έχει γίνει ανάθεση σε σταθερό Rack</p>
                                <p v-if="crateObject.rackPosition !== null"><span class="text-info">Θέση:</span> 
                                    <a href="#" variant="link" @click.prevent="visit(crateObject.rackPosition.barcode)">
                                        ${ crateObject.rackPosition.barcode }$
                                    </a>
                                </p>
                                <p v-if="crateObject.rackPosition !== null"><span class="text-info">Rack:</span> 
                                    <a href="#" variant="link" @click.prevent="visit(crateObject.rackPosition.rack.barcode) ">
                                        ${ crateObject.rackPosition.rack.barcode }$
                                    </a>
                                </p>
                                <p v-if="crateObject.rollRackPosition !== null">
                                    <span class="text-info">Θέση Roll Rack:</span> 
                                    <a href="#" variant="link" @click.prevent="visit(crateObject.rollRackPosition.barcode) ">
                                        ${ crateObject.rollRackPosition.barcode }$
                                    </a>
                                </p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col">
                                <p class="h5 text-center">{% trans %}Περιεχόμενα{% endtrans %}</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col">
                                <table class="table table-dark table-hover table-condensed table-striped">
                                    <thead>
                                        <tr>
                                            <td>{% trans %}IB ID{% endtrans %}</td>
                                            <td>{% trans %}IB BARCODE{% endtrans %}</td>
                                            <td>{% trans %}IB TYPE{% endtrans %}</td>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr v-for="(b, index) in this.crateObject.boxes">
                                            <td>${ b.id }$</td>
                                            <td>
                                                <a href="#" variant="link" @click.prevent="visit(b.barcode) ">
                                                    ${ b.barcode }$</a>
                                            </td>
                                            <td>${ b.insertBoxType.name }$</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </template>


                    <template v-if="rackObject">
                        <div class="row mt-5">
                            <div class="col">
                                <p class="h5 text-center infoboxBlue">{% trans %}Rack{% endtrans %}</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col">
                                <div class="row">
                                    <div class="col">
                                        <p><span class="text-info">ID:</span> ${ rackObject.id }$</p>
                                        <p><span class="text-info">Barcode:</span> ${ rackObject.barcode }$</p>
                                        <p><span class="text-info">Θέση:</span> διάδρομος: ${ rackObject.position }$, αρ. ${ rackObject.positionX }$</p>
                                    </div>
                                </div>

                            </div>
                        </div>

                        <div class="row">
                            <div class="col">
                                <p class="h5 text-center">{% trans %}Περιεχόμενα{% endtrans %}</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col">
                                <table class="table table-dark table-hover table-condensed table-striped">
                                    <thead>
                                        <tr>
                                            <td>{% trans %}ID{% endtrans %}</td>
                                            <td>{% trans %}Θέσεις{% endtrans %}</td>
                                            <td>{% trans %}Crate{% endtrans %}</td>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr v-for="(b, index) in this.rackObject.cratePositions">
                                            <td>${ b.id }$</td>
                                            <td>${ b.barcode }$</td>
                                            <td>
                                                <a href="#" v-if="b.crate" variant="link" @click.prevent="visit(b.crate.barcode)">${ b.crate.barcode }$</a>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </template>
                    <template v-if="rollrackObject">
                        <div class="row mt-5">
                            <div class="col">
                                <p class="h5 text-center infoboxBlue">{% trans %}Roll Rack{% endtrans %}</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col">
                                <p><span class="text-info">ID:</span> ${ this.rollrackObject.id }$</p>
                                <p><span class="text-info">Barcode:</span> ${ this.rollrackObject.barcode }$</p>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col">
                                <p class="h5 text-center">{% trans %}Περιεχόμενα{% endtrans %}</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col">
                                <table class="table table-dark table-hover table-condensed table-striped">
                                    <thead>
                                        <tr>
                                            <td>{% trans %}ID{% endtrans %}</td>
                                            <td>{% trans %}Θέσεις{% endtrans %}</td>
                                            <td>{% trans %}Crate{% endtrans %}</td>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr v-for="(b, index) in this.rollrackObject.cratePositions">
                                            <td>${ b.id }$</td>
                                            <td>${ b.barcode }$</td>
                                            <td>
                                                <a href="#" v-if="b.crate" variant="link" @click.prevent="visit(b.crate.barcode)">${ b.crate.barcode }$</a>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </template>
                    <template v-if="product">
                        <div class="row mt-5">
                            <div class="col">
                                <p class="h5 text-center infoboxBlue">{% trans %}SKU{% endtrans %}</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col">
                                <p><span class="text-info">ID:</span> ${ this.product.id }$</p>
                                <p><span class="text-info">Barcode:</span> ${ this.product.barcode }$</p>
                                <p v-if="false"><span class="text-info">Alternative Barcode:</span> ${ this.product.barcode2 }$</p>
                                <p><span class="text-info">SKU:</span> ${ this.product.sku }$</p>
                                <p><span class="text-info">Description:</span> ${ this.product.description }$</p>
                                <p v-if="this.product.inactive"><span class="text-info">Active:</span> No</p>
                                <p v-if="!this.product.inactive"><span class="text-info">Active:</span> YES</p>
                                <p><span class="text-info">Dimensions:</span> ${ this.product.X }$ / ${ this.product.Z }$ / ${ this.product.Y }$</p>
                                <p><img width="64px" @click="showModal" v-if="infoSKUImage" class="img-thumbnail" style="" :src="infoSKUImage"/></p>
                            </div>

                        </div>
                        <div class="row">
                            <div class="col">
                                <p class="h5 text-center">{% trans %}IB που περιέχουν το προϊόν{% endtrans %}</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col">
                                <table class="table table-dark table-hover table-condensed table-striped">
                                    <thead>
                                        <tr>
                                            <td>{% trans %}ID{% endtrans %}</td>
                                            <td>{% trans %}IB barcode{% endtrans %}</td>
                                            <td>{% trans %}Amount{% endtrans %}</td>
                                            <td>{% trans %}Crate{% endtrans %}</td>
                                            <td>{% trans %}Rack Position{% endtrans %}</td>
                                            <td>{% trans %}Rack{% endtrans %}</td>
                                            <td>{% trans %}Roll Rack Crate{% endtrans %}</td>
                                            <td>{% trans %}Roll Rack Position{% endtrans %}</td>
                                            <td>{% trans %}Roll Rack{% endtrans %}</td>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr v-for="(b, index) in this.product.boxes">
                                            <td>${ b.id }$</td>
                                            <td><a href="#" variant="link" @click.prevent="visit(b.box.barcode)">${ b.box.barcode }$</a></td>
                                            <td>${ b.amount }$</td>
                                            <td><a v-if="b.box.crate" href="#" variant="link" @click.prevent="visit(b.box.crate.barcode)">${ b.box.crate.barcode }$</a></td>
                                            <td><a v-if="b.box.crate && b.box.crate.rackPosition" href="#" variant="link" @click.prevent="visit(b.box.crate.rackPosition.barcode)">${ b.box.crate.rackPosition.barcode }$</a></td>
                                            <td><a v-if="b.box.crate && b.box.crate.rackPosition && b.box.crate.rackPosition.rack" href="#" variant="link" @click.prevent="visit(b.box.crate.rackPosition.rack.barcode)">${ b.box.crate.rackPosition.rack.barcode }$</a></td>
                                            <td><a v-if="b.box.rollCrate" href="#" variant="link" @click.prevent="visit(b.box.rollCrate.barcode)">${ b.box.rollCrate.barcode }$</a></td>
                                            <td><a v-if="b.box.rollCrate && b.box.rollCrate.rollRackPosition" href="#" variant="link" @click.prevent="visit(b.box.rollCrate.rollRackPosition.barcode)">${ b.box.rollCrate.rollRackPosition.barcode }$</a></td>
                                            <td><a v-if="b.box.rollCrate && b.box.rollCrate.rollRackPosition && b.box.rollCrate.rollRackPosition.rollRack" href="#" variant="link" @click.prevent="visit(b.box.rollCrate.rollRackPosition.rollRack.barcode)">${ b.box.rollCrate.rollRackPosition.rollRack.barcode }$</a></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </template>
                    <template v-if="rollrackPosition">
                        <div class="row mt-5">
                            <div class="col">
                                <p class="h5 text-center infoboxBlue">{% trans %}Roll Rack Position{% endtrans %}</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col">
                                <p><span class="text-info">ID:</span> ${ this.rollrackPosition.id }$</p>
                                <p><span class="text-info">Barcode:</span> ${ this.rollrackPosition.barcode }$</p>
                                <p><span class="text-info">RollRack:</span> 
                                    <a href="#" variant="link" @click.prevent="visit(rollrackPosition.rollRack.barcode)">
                                        ${ this.rollrackPosition.rollRack.barcode }$
                                    </a>
                                </p>
                            </div>
                        </div>
                    </template>
                    <template v-if="rackPosition">
                        <div class="row mt-5">
                            <div class="col">
                                <p class="h5 text-center infoboxBlue">{% trans %}Rack Position{% endtrans %}</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col">
                                <p><span class="text-info">ID:</span> ${ this.rackPosition.id }$</p>
                                <p><span class="text-info">Barcode:</span> ${ this.rackPosition.barcode }$</p>
                                <p><span class="text-info">Rack:</span> 
                                    <a href="#" variant="link" @click.prevent="visit(rackPosition.rack.barcode) ">
                                        ${ this.rackPosition.rack.barcode }$
                                    </a>
                                </p>
                            </div>
                        </div>
                    </template>
                </div>
            </div>
        </div>
        <div>
            <b-modal ref="img-modal" hide-footer size="lg" :title="productdescription">
                <div class="d-block text-center">
                    <img @click="showModal" v-if="infoSKUImage" class="img img-fluid" style="" :src="infoSKUImage"/>
                </div>
            </b-modal>
        </div>
        {#<b-card class="mt-3" header="Data">
            <pre class="m-0">S ${ this.$root.$data.step }$</pre>
            <pre class="m-0">B ${ this.$root.$data.scannedBarcode }$</pre>
            <pre class="m-0">RA ${ this.$root.$data.racks }$</pre>
            <pre class="m-0">CI ${ this.$root.$data.crates }$</pre>
            <pre class="m-0">RAC ${ this.$root.$data.rack }$</pre>
        </b-card>#}
    </div>
{% endblock %}

{% block js %}
    {{ parent() }}
    <script>
        new Vue({
            delimiters: ['${', '}$'],
            el: '#app',
            data: {
                errorMessage: null,
                scannedBarcode: '',
                crateObject: null,
                boxObject: null,
                rackObject: null,
                rollrackObject: null,
                rackPosition: null,
                rollrackPosition: null,
                product: null
            },
            async mounted() {
                this.$refs.barcode.state = null;
                this.scannedBarcode = "";
                this.$nextTick(() => {
                    this.$refs.barcode.focus();
                });
            },
            computed: {
                showError: function () {
                    if (this.errorMessage === null)
                        return false;
                    if (this.errorMessage === '')
                        return false;
                    return true;
                },
                invalidInput: function () {
                    if (this.scannedBarcode === null)
                        return true;
                    if (this.scannedBarcode.trim() === '')
                        return true;
                    return false;
                },
                infoSKUImage: function () {
                    if (this.product) {
                        var skuBarcode = this.product.barcode;
                        return "https://www.galeriedebeaute.gr/images/products/"
                                + skuBarcode + "_01.jpg";
                    }
                    return "";
                },
                productdescription: function () {
                    if (this.product) {
                        return this.product.description;
                    }
                    return "";
                }
                /*,
                 boxPosition: function () {
                 var position;
                 if (this.boxObject.crate === null) {
                 return "Crate: Unassigned";
                 }
                 position = "Crate: " + this.boxObject.crate.barcode + ", " + this.cratePosition(this.boxObject.crate);
                 
                 if (this.boxObject.rollCrate) {
                 position += " (Now in Roll Rack ";
                 var roll = this.getRoll(this.boxObject.rollCrate.id);
                 console.log("roll");
                 console.log(roll);
                 if (roll.rollRack)
                 position += roll.rollRack.barcode;
                 position += ")";
                 }
                 return position;
                 }*/
            },
            watch: {
            },
            methods: {
                getRack: async function (barcode) {
                    var e = null;
                    await axios.post('{{ path('api_get_rack') }}', {
                        barcode: barcode
                    }).then(response => {
                        console.log(response);
                        e = response.data;
                    }).catch(function (error) {
                        console.log(error);
                    });
                    return e;
                },
                getRollRack: async function (barcode) {
                    var e = null;
                    await axios.post('{{ path('api_get_rollrack') }}', {
                        barcode: barcode
                    }).then(response => {
                        console.log(response);
                        e = response.data;
                    }).catch(function (error) {
                        console.log(error);
                    });
                    return e;
                },
                okClicked: function () {
                    this.enterClicked();
                },
                getBarcodeEntity: async function (barcode) {
                    var type;
                    await axios.post('{{ path('api_barcode_lookup') }}', {
                        barcode: barcode
                    }).then(response => {
                        console.log(response);
                        type = response.data.type;
                    }).catch(function (error) {
                        console.log(error);
                    });
                    return type;
                },
                getBox: async function (barcode) {
                    var e;
                    await axios.post('{{ path('api_get_ib') }}', {
                        barcode: barcode
                    }).then(response => {
                        console.log(response);
                        e = response.data;
                    }).catch(function (error) {
                        console.log(error);
                    });
                    return e;
                },
                getCrate: async function (barcode) {
                    var e;
                    await axios.post('{{ path('api_get_crate') }}', {
                        barcode: barcode
                    }).then(response => {
                        console.log(response);
                        e = response.data;
                    }).catch(function (error) {
                        console.log(error);
                    });
                    return e;
                },
                getProduct: async function (barcode) {
                    var e;
                    await axios.post('{{ path('api_get_product') }}', {
                        barcode: barcode
                    }).then(response => {
                        console.log(response);
                        e = response.data;
                    }).catch(function (error) {
                        console.log(error);
                    });
                    return e;
                },
                getRackPosition: async function (barcode) {
                    var e;
                    await axios.post('{{ path('api_get_rack_position') }}', {
                        barcode: barcode
                    }).then(response => {
                        console.log(response);
                        e = response.data;
                    }).catch(function (error) {
                        console.log(error);
                    });
                    return e;
                },
                getRollRackPosition: async function (barcode) {
                    var e;
                    await axios.post('{{ path('api_get_rollrack_position') }}', {
                        barcode: barcode
                    }).then(response => {
                        console.log(response);
                        e = response.data;
                    }).catch(function (error) {
                        console.log(error);
                    });
                    return e;
                },
                enterClicked: async function () {
                    this.rackObject = null;
                    this.crateObject = null;
                    this.boxObject = null;
                    this.rollrackObject = null;
                    this.rollrackPosition = null;
                    this.rackPosition = null;
                    this.product = null;

                    var entityBarcode = this.scannedBarcode;
                    this.scannedBarcode = '';
                    this.$nextTick(() => {
                        this.$refs.barcode.focus();
                    });
                    this.errorMessage = null;
                    var type = await this.getBarcodeEntity(entityBarcode);
                    //alert(type);
                    if (type === null) {
                        this.errorMessage = "Λάθος Barcode";
                        return;
                    }

                    if (type === 'rack') {
                        this.rackObject = await this.getRack(entityBarcode);
                    } else if (type === 'crate') {
                        this.crateObject = await this.getCrate(entityBarcode);
                        if (this.crateObject.rackPosition !== null && this.crateObject.barcode === this.crateObject.rackPosition.barcode)
                        {
                            this.rackPosition = await this.getRackPosition(entityBarcode);
                        }
                    } else if (type === 'box') {
                        this.boxObject = await this.getBox(entityBarcode);
                        if (this.boxObject.barcode === this.boxObject.crate.barcode) {
                            this.crateObject = await this.getCrate(entityBarcode);
                            if (this.crateObject.rackPosition !== null && this.crateObject.barcode === this.crateObject.rackPosition.barcode)
                            {
                                this.rackPosition = await this.getRackPosition(entityBarcode);
                            }
                        }
                    } else if (type === 'rollrack') {
                        this.rollrackObject = await this.getRollRack(entityBarcode);
                    } else if (type === 'rollrackposition') {
                        this.rollrackPosition = await this.getRollRackPosition(entityBarcode);
                    } else if (type === 'rackposition') {
                        this.rackPosition = await this.getRackPosition(entityBarcode);
                    } else if (type === 'product') {
                        this.product = await this.getProduct(entityBarcode);
                    }
                    return;

                },
                visit: function (barcode) {

                    this.scannedBarcode = barcode;
                    this.enterClicked();
                },
                showModal: function () {
                    this.$refs['img-modal'].show();
                }
            }
        }
        );
    </script>
{% endblock %}