<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.w3.org/1999/xhtml"
      xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head th:replace="_fragments :: head('Segregate Finished Items')"></head>
<body>
<div class="container-fluid">
    <header class="row page-header" th:replace="_fragments :: page-header"></header>
    <main class="row page-main">
        <div class="col-sm">
            <div class="mb-4 d-flex justify-content-between">
                <h3>Segregate Finished Items</h3>
            </div>
            <form th:action="'/ctp/finishing/segregate-inventory'" method="post" id="finishedApp">
                <div class="bg-light p-3 mb-3">
                    <div class="form-row">
                        <div class="col-sm-3 form-group">
                            <search-item
                                    url="/ctp/rest/finished-items/search"
                                    v-on:finished-item-select="onItemSelect">
                            </search-item>
                        </div>
                        <div class="col-sm-3 form-group">
                            <!--                                    <label>Packaging Account</label>-->
                            <!--                                    <select class="form-control" name="account-id" th:field="*{finishedAccountId}" required>-->
                            <!--                                        <option value="">PLease select</option>-->
                            <!--                                        <option th:each="account : ${accounts}"-->
                            <!--                                                th:value="${account.id}"-->
                            <!--                                                th:text="${account.title}"></option>-->
                            <!--                                    </select>-->
                        </div>

                    </div>
                    <input type="hidden" name="qaStatus" v-model="QaStatus">
                </div>
                <div class="bg-light p-3 mb-3">
                    <h6 class="mb-3">Finished Items</h6>
                    <finished-item-table
                            v-bind:items="items"
                            v-on:remove-item="removeItem"
                    ></finished-item-table>
                </div>
                <div class="alert alert-danger" v-if="hasDuplicates()">Duplicate Item Selected</div>
                <button class="btn btn-primary mr-2" type="button" :disabled="hasDuplicates() || items.length === 0"
                        @click="submitWithQaStatus('APPROVED')">APPROVED
                </button>
                <button class="btn btn-danger mr-2" type="button" :disabled="hasDuplicates() || items.length === 0"
                        @click="submitWithQaStatus('ALTER')">ALTER
                </button>
                <button class="btn btn-danger mr-2" type="button" :disabled="hasDuplicates() || items.length === 0"
                        @click="submitWithQaStatus('B GRADE')">B GRADE
                </button>
                <button class="btn btn-danger mr-2" type="button" :disabled="hasDuplicates() || items.length === 0"
                        @click="submitWithQaStatus('REJECT')">REJECT
                </button>
                <button class="btn btn-success mr-2" type="button" :disabled="hasDuplicates() || items.length === 0"
                        @click="submitWithQaStatus('WASHED')">WASHED
                </button>
                <a th:href="@{/finishing/finished-items}" class="btn btn-light">Cancel</a>
            </form>
            <script th:inline="javascript">
                window.ctp.accounts = [[${accounts}]];
            </script>
            <script th:src="@{/js/vendor/compressor.min.js}"></script>
            <script th:src="@{/js/finishing/finished-item-segregation-form.js}"></script>
        </div>
    </main>
</div>
<div th:replace="_fragments :: page-footer-scripts"></div>
</body>
</html>