<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.w3.org/1999/xhtml"
      xmlns:uind="http://www.w3.org/1999/xhtml" xmlns:ctp="http://www.w3.org/1999/xhtml">
<head th:replace="_fragments :: head('Home Page')"></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" th:fragment="inventoryAccountForm">
            <form th:action="@{ ${account.id} ? ('/inventory-accounts/edit/' + ${account.id}) : '/inventory-accounts/edit' }"
                  method="POST" th:object="${account}"
                  id="accountApp">
                <input type="hidden" th:field="*{id}">
                <input type="hidden" th:field="*{createdAt}">
                <input type="hidden" th:field="*{createdBy}">
                <div class="bg-light p-3 mb-3">
                    <h6 class="mb-3">Account </h6>
                    <div class="form-row">
                        <div class="col-sm-3 form-group">
                            <label>Title</label>
                            <input class="form-control" th:field="*{title}" required>
                        </div>
                        <div class="col-sm-3 form-group">
                            <label>Article Name</label>
                            <input class="form-control" th:field="*{articleName}">
                        </div>
                        <div class="col-sm-3 form-group">
                            <label>Shift Minutes</label>
                            <input type="number" class="form-control" th:field="*{shiftMinutes}">
                        </div>
                        <div class="col-sm-3 form-group">
                            <label>Efficiency</label>
                            <input type="number" class="form-control" th:field="*{efficiency}" step="0.01"
                                   inputmode="decimal" min="0">
                        </div>
                        <div class="col-sm-3 form-group">
                            <label>SAM</label>
                            <input type="number" class="form-control no-spinner" th:field="*{sam}" step="0.01"
                                   inputmode="decimal" min="0"></div>
                        <div class="col-sm-3 form-group">
                            <label>Total Machine</label>
                            <input type="number" class="form-control" th:field="*{totalMachines}">
                        </div>
                        <div class="col-sm-6 form-group">
                            <label>Notes</label>
                            <input class="form-control" th:field="*{notes}" required>
                        </div>
                    </div>
                </div>
                <div class="bg-light p-3 mb-3">
                    <h6 class="mb-3">Misc </h6>
                    <div class="form-row">
                        <div class="col-sm-3 form-group">
                            <label>Parent Type</label>
                            <select class="form-control" th:field="*{parentEntityType}">
                                <option value="">Please Select</option>
                                <option value="PROCESS">PROCESS</option>
                            </select>
                        </div>
                        <div class="col-sm-3 form-group">
                            <label>Process</label>
                            <select class="form-control" th:field="*{parentEntityId}">
                                <option value="0">Please Select</option>
                                <option th:each="process:${processes}"
                                        th:value="${process.id}"
                                        th:text="${process.title}"
                                ></option>
                            </select>
                        </div>
                        <div class="col-sm-3 form-group" data-vue-app
                             th:with="id=*{locationSiteId},title=*{locationTitle}">
                            <location-site-search th:attr="id=${id},title=${title}"
                                                  v-bind:label-text="'Location Site'"
                                                  v-bind:id-field-name="'locationSiteId'"
                                                  v-bind:required="true">
                            </location-site-search>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="col-sm-3 form-group">
                            <label>Created By</label>
                            <span th:text="*{createdBy}" class="form-control" readonly></span>
                        </div>
                        <div class="col-sm-3 form-group">
                            <label>Created At</label>
                            <span class="form-control" ctp:formatdatetime="*{createdAt}" readonly></span>
                        </div>
                        <div class="col-sm-1 form-group">
                            <label for="active">Active</label>
                            <div class="form-check">
                                <input class="custom-control-label:" type="checkbox" id="active" th:field="*{active}"/>
                            </div>
                        </div>
                        <div class="col-sm-1 form-group">
                            <label for="is-grading">Is Grading Account</label>
                            <div class="form-check">
                                <input class="custom-control-label:" type="checkbox" id="is-grading"
                                       th:field="*{isPackaging}"/>
                            </div>
                        </div>
                    </div>
                </div>
                <div>
                    <button class="btn btn-primary" type="submit">Submit</button>
                    <a th:href="@{/inventory-accounts}" class="btn btn-light">Cancel</a>
                </div>
            </form>
        </div>
    </main>
</div>
</body>
<style>
    /* Custom CSS to increase the size of the checkbox */
    .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
        border-color: #007bff;
        background-color: #007bff;
    }

    .custom-checkbox .custom-control-input ~ .custom-control-label::before {
        width: 1.5em;
        height: 1.5em;
    }

    .custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
        font-size: 1em;
    }

    .custom-checkbox .custom-control-input {
        width: 1.5em;
        height: 1.5em;
    }
</style>
</html>