@extends('admin.layouts.app')

@section('content')
<div class="container-fluid">
    <h2>게시판 관리 - 분류</h2>
    <hr/>
    @include('admin.messages')
    @if($boardID)
        @include('admin.board.board.navTabs')
    @endif

    @if($boardMetaData->use_category ?? false)
        <div class="alert alert-dismissible alert-warning">
            현재 분류 기능이 활성화되어 있습니다.<br/>
            분류 기능을 잠시 해제하기 위해서는 "일반 기능" 탭에서 "분류 기능" 란에 선택을 해제해 주세요.
        </div>
    @else
        <div class="alert alert-dismissible alert-danger">
            현재 카테고리 기능이 활성화되어있지 않습니다.<br/>
            분류 기능을 사용하기 위해서는 "일반 기능" 탭에서 "분류 기능" 란에 선택해 주세요.
        </div>
    @endif

    <div class="row mb-2">
        <div class="col align-self-center">
            <label>전체 : {{ $boardCategoryData->total }}</label>
        </div>
        <div class="col text-end">
            <button type="button" class="btn btn-outline-dark btn-list-delete btn-list-selected disabled" data-list-delete-url="/admin/board/board/category/destroy">선택삭제</button>
        </div>
    </div>

    <form name="f_admin_list" id="fAdminList" method="post">
        @csrf
        <input type="hidden" name="board_id" value="{{ $boardID }}" />
        <div class="table-responsive">
            <table class="table table-hover table-bordered table-nowrap">
                <colgroup>
                    <col width="2%" />
                    <col width="5%" />
                    <col width="5%" />
                    <col width="*" />
                    <col width="7%" />
                    <col width="15%" />
                    <col width="15%" />
                </colgroup>
                <thead>
                    <tr>
                        <th><input type="checkbox" name="chk_all" id="chkAll" class="form-check-input" value="1"/></th>
                        <th>번호</th>
                        <th>순서</th>
                        <th>카테고리 명</th>
                        <th>깊이</th>
                        <th>등록일시</th>
                        <th>수정일시</th>
                    </tr>
                </thead>
                <tbody>
                <?php
                if($boardCategoryData->rows > 0) {
                    $traverse = function ($categories) use (&$traverse) {
                    foreach($categories as $row) {
                        $pk = $row->id;
                        $chk = "chk_{$pk}";
                        $catArea = 'cat-category-id-' . $pk;
                        $modArea = 'mod-category-id-' . $pk;

                        $tab = ($row->depth > 0 ? '┗' : '') . str_repeat('━', ($row->depth > 0 ? $row->depth - 1 : 0)) . ($row->depth > 0 ? '>' : '');
                ?>
                    <tr>
                        <td>
                            <input type="checkbox" name="chk[]" id="chk_{{ $chk }}" class="form-check-input list-check-box" value="{{ $pk }}" />
                            <input type="hidden" name="parent_id" class="bca-parent-id-{{ $pk }}" value="{{ $row->parent_id }}"/>
                            <input type="hidden" name="depth" class="bca-depth-{{ $pk }}" value="{{ $row->depth }}"/>
                        </td>
                        <td>{{ $pk }}</td>
                        <td>
                            <a href="{{ route('admin.board.board.category.up', $pk) }}"><i class="fas fa-caret-square-up"></i></a>
                            <a href="{{ route('admin.board.board.category.down', $pk) }}"><i class="fas fa-caret-square-down"></i></a>
                        </td>
                        <td>
                            <div class="row">
                                <div class="col text-start align-self-center">
                                    <span class="{{ $catArea }}" >
                                        {{ $tab . ' ' . $row->name }}
                                    </span>
                                    <div class="{{ $modArea }}" style="display: none;">
                                        <input type="text" name="name" class="form-control bca-name-{{ $pk }} me-1" value="{{ $row->name }}"/>
                                    </div>
                                </div>
                                <div class="col-auto pl-0">
                                    <div class="{{ $catArea }}">
                                        <button type="button" class="btn btn-primary btn-sm btn-modify" data-category-id="{{ $pk }}">수정</button>
                                    </div>
                                    <div class="{{ $modArea }}" style="display: none;">
                                        <button type="submit" class="btn btn-primary btn-sm btn-save" form="fAdminModify" data-category-id="{{ $pk }}">저장</button>
                                        <button type="button" class="btn btn-light btn-sm btn-cancel" data-category-id="{{ $pk }}">취소</button>
                                    </div>
                                </div>
                            </div>
                        </td>
                        <td>{{ $row->depth }}</td>
                        <td>{{ $row->created_at }}</td>
                        <td>{{ $row->updated_at ?? '-' }}</td>
                    </tr>
                <?php $traverse($row->children); } }; $traverse($boardCategoryData->list); }else{ ?>
                    <tr>
                        <td colspan="7">
                            No data.
                        </td>
                    </tr>
                <?php } ?>
                </tbody>
            </table>
        </div>
    </form>

    <!-- 수정 -->
    <form name="f_admin_modify" id="fAdminModify" method="post" action="{{ route('admin.board.board.category.store') }}">
        @csrf
        <input type="hidden" name="board_id" value="{{ $boardID }}"/>
        <input type="hidden" name="board_category_id" value=""/>
        <input type="hidden" name="parent_id" value=""/>
        <input type="hidden" name="depth" value=""/>
        <input type="hidden" name="name" value=""/>
        <input type="hidden" name="type" value="modify"/>
    </form>

    <!-- 등록 -->
    <form name="f_admin_write" id="fAdminWrite" method="post" action="{{ route('admin.board.board.category.store') }}">
        @csrf
        <input type="hidden" name="board_id" value="{{ $boardID }}"/>
        <input type="hidden" name="depth" value=""/>
        <input type="hidden" name="type" value="add"/>

        <div class="row">
            <label for="parentID" class="col-auto col-form-label">카테고리</label>
            <div class="col col-sm-5">
                <div class="input-group">
                    <select name="parent_id" id="parentID" class="form-select">
                        <option value="0">최상위 카테고리</option>
                        <?php
                        $traverse = function ($categories) use (&$traverse) {
                            foreach($categories as $row) {
                                $tab = ($row->depth > 0 ? '┗' : '') . str_repeat('━', ($row->depth > 0 ? $row->depth - 1 : 0)) . ($row->depth > 0 ? '>' : '');
                            ?>
                            <option value="{{ $row->id }}" data-depth="{{ $row->depth }}">{{$tab . ' ' . $row->name}}</option>
                            <?php
                                $traverse($row->children);
                            }
                        };
                        $traverse($boardCategoryData->list);
                        ?>
                    </select>
                    <input type="text" name="name" id="name" class="form-control" placeholder="카테고리 명"/>
                    <button type="submit" class="btn btn-success">추가하기</button>
                </div>
            </div>
        </div>
    </form>
</div>

<script type="module">
$("#fAdminWrite").validate({
    rules: {
        parent_id: {required: true, number: true},
        name: {required: true}
    },
    submitHandler: function(form) {
        let depth = $("#parentID option:selected").data("depth");
        if (typeof depth == "undefined") {
            depth = 0;
        } else {
            depth = (depth + 1);
        }
        form.depth.value = depth;

        return true;
    }
});

$("#fAdminModify").validate({
    rules: {
        board_category_id: {required: true, number: true},
        parent_id: {number: true},
        depth: {required: true, number: true},
        name: {required: true},
    }
});

// 저장
$(document).on("click", ".btn-save", function(e) {
    let key = this.dataset.categoryId;
    e.target.form.board_category_id.value = key;
    e.target.form.parent_id.value = $(".bca-parent-id-" + key).val();
    e.target.form.depth.value = $(".bca-depth-" + key).val();
    e.target.form.name.value = $(".bca-name-" + key).val();
});

// 수정
$(document).on("click", ".btn-modify", function() {
    let key = this.dataset.categoryId;
    $('.cat-category-id-' + key).hide();
    $('.mod-category-id-' + key).show();
});

// 취소
$(document).on("click", ".btn-cancel", function() {
    let key = this.dataset.categoryId;
    $('.cat-category-id-' + key).show();
    $('.mod-category-id-' + key).hide();
});
</script>
@endsection
