<?php
$CURRENT_SECTION = 'process';
include '../inc/header.php';
?>
    <div class="container" style="max-width:1280px; margin-top:24px;">
        <div class="d-flex align-items-center justify-content-between mb-3">
            <h2 class="m-0">공정 생성 / 수정</h2>
            <div class="d-flex gap-2">
                <a href="/tenant/process/processes.php" class="btn btn-outline-secondary">취소</a>
                <button class="btn btn-primary">저장</button>
            </div>
        </div>

        <form>
            <div class="row g-3">
                <div class="col-md-6">
                    <label class="form-label">공정명 <span class="text-danger">*</span></label>
                    <input type="text" class="form-control" placeholder="예) 절곡">
                </div>
                <div class="col-md-6">
                    <label class="form-label">설명</label>
                    <input type="text" class="form-control" placeholder="선택 입력">
                </div>
            </div>

            <hr class="my-4">

            <h4 class="mb-1">작업 리스트</h4>
            <p class="text-muted small mb-3">작업별로 시작/완료 피드백 필요 여부를 설정할 수 있습니다.</p>

            <div id="task-list"></div>

            <div class="text-end mt-2">
                <button id="btn-add-task" type="button" class="btn btn-outline-secondary">+ 작업 추가</button>
            </div>
        </form>
    </div>

    <template id="task-row-tpl">
        <div class="card task-row mb-2">
            <div class="card-body">
                <div class="row g-2 align-items-center">
                    <div class="col-md-4">
                        <label class="form-label mb-1">작업명 <span class="text-danger">*</span></label>
                        <input type="text" class="form-control task-name" placeholder="예) 절단작업">
                    </div>
                    <div class="col-md-3">
                        <div class="form-check mt-4">
                            <input class="form-check-input task-need-start" type="checkbox" id="">
                            <label class="form-check-label">작업 시작 피드백 필요</label>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-check mt-4">
                            <input class="form-check-input task-need-end" type="checkbox" id="">
                            <label class="form-check-label">작업 완료 피드백 필요</label>
                        </div>
                    </div>
                    <div class="col-md-2 text-end">
                        <button type="button" class="btn btn-sm btn-danger btn-remove-task mt-4">삭제</button>
                    </div>
                </div>
            </div>
        </div>
    </template>

    <script>
        (function(){
            const list = document.getElementById('task-list');
            const tpl  = document.getElementById('task-row-tpl').content;

            function addRow(prefill){
                const node = document.importNode(tpl, true);
                if (prefill){
                    if (prefill.name) node.querySelector('.task-name').value = prefill.name;
                    if (prefill.needStart) node.querySelector('.task-need-start').checked = true;
                    if (prefill.needEnd) node.querySelector('.task-need-end').checked = true;
                }
                node.querySelector('.btn-remove-task').addEventListener('click', e=>{
                    e.target.closest('.task-row').remove();
                });
                list.appendChild(node);
            }

            // seed
            addRow({name:'절단작업', needStart:true, needEnd:true});
            addRow({name:'미싱작업', needStart:false, needEnd:true});

            document.getElementById('btn-add-task').addEventListener('click', ()=> addRow());
        })();
    </script>
<?php include '../inc/footer.php'; ?>
