@extends('admin.layouts.app')

@section('content')
<div class="container-fluid">
    <h2>메뉴 관리</h2>
    <hr/>

    @include('admin.messages')

        <h6>전체 : {{ $menuData->rows }}</h6>
        <br/>

        <?php ob_start(); ?>
        <div>
            <button type="button" class="btn btn-outline-dark btn-list-update btn-list-selected disabled" data-list-update-url="/admin/page/menu/update">선택수정</button>
            <button type="button" class="btn btn-outline-dark btn-list-delete btn-list-selected disabled" data-list-delete-url="/admin/page/menu/destroy">선택삭제</button>
        </div>
        <?php
        $buttons = ob_get_contents();
        ob_end_flush();
        ?>

        <div class="card card-body overflow-auto mt-2 mb-2">
            <form name="f_admin_list" id="fAdminList" method="post">
                @csrf
                <ul id="sortable" class="nav flex-column">
                    @if($menuData->total > 0)
                    @foreach($menuData->list as $menu)
                        @php
                            $tab = ('style="margin-left: ' . (2 * $menu->depth) . '%";');
                        @endphp
                        <li class="nav-item @if($menu->tab !== '') nav-group @endif">
                            <div class="row" {!! $tab !!}>
                                @if($menu->tab !== '')
                                    <div class="col-auto">
                                        {{ $menu->tab }}
                                    </div>
                                @endif
                                <div class="col">
                                    <table class="table table-bordered table-sm text-nowrap table-nowrap">
                                        <thead>
                                            <tr>
                                                <th>
                                                    <div class="form-check-inline p-2">
                                                        <input type="checkbox" name="chk[]" id="chk_{{ $menu->id }}" class="form-check-input list-check-box" value="{{ $menu->id }}" />
                                                        <label for="chk_{{ $menu->id }}" class="form-check-label ms-1 me-1">{{ $menu->name }}</label>
                                                    </div>
                                                    <input type="hidden" name="menu_id[{{ $menu->id }}]" value="{{ $menu->id }}" />
                                                    <input type="hidden" name="depth[{{ $menu->id }}]" value="{{ $menu->depth }}" />
                                                    <input type="hidden" name="parent_id[{{ $menu->id }}]" value="{{ $menu->parent_id }}" />
                                                </th>
                                                <th>순서</th>
                                                <th>속성</th>
                                                <th>PC</th>
                                                <th>모바일</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>
                                                    <input type="text" name="name[{{ $menu->id }}]" class="form-control" value="{{ $menu->name }}"/>
                                                </td>
                                                <td>
                                                    <a href="{{ $menu->upURL }}" class="btn btn-secondary btn-sm ml-1">▲</a>
                                                    <a href="{{ $menu->downURL }}" class="btn btn-secondary btn-sm ml-1">▼</a>
                                                </td>
                                                <td>
                                                    <input type="text" name="custom[{{ $menu->id }}]" class="form-control" value="{{ $menu->custom }}"/>
                                                </td>
                                                <td>
                                                    <select name="desktop[{{ $menu->id }}]" class="form-select">
                                                        <option value="1" @if($menu->desktop == '1') selected @endif>사용함</option>
                                                        <option value="0" @if($menu->desktop == '0') selected @endif>사용안함</option>
                                                    </select>
                                                </td>
                                                <td>
                                                    <select name="mobile[{{ $menu->id }}]" class="form-select">
                                                        <option value="1" @if($menu->mobile == '1') selected @endif>사용함</option>
                                                        <option value="0" @if($menu->mobile == '0') selected @endif>사용안함</option>
                                                    </select>
                                                </td>
                                            </tr>
                                            <tr>
                                                <th colspan="3">URL</th>
                                                <th>아이콘</th>
                                                <th>새창 여부</th>
                                            </tr>
                                            <tr>
                                                <td colspan="3">
                                                    <input type="text" name="link[{{ $menu->id }}]" class="form-control" value="{{ $menu->link }}"/>
                                                </td>
                                                <td>
                                                    <input type="text" name="icon[{{ $menu->id }}]" class="form-control" value="{{ $menu->icon }}"/>
                                                </td>
                                                <td>
                                                    <select name="target[{{ $menu->id }}]" class="form-select">
                                                        <option value="0" @if($menu->target == '0') selected @endif>현재창</option>
                                                        <option value="1" @if($menu->target == '1') selected @endif>새창</option>
                                                    </select>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </li>
                    @endforeach
                    @else
                        <div class="text-center">
                        메뉴를 추가해주세요.
                        </div>
                    @endif
                </ul>
            </form>
        </div>

        {!! $buttons !!}
        <br/>

        <div class="table-responsive">
            <form name="f_admin_write" id="fAdminWrite" method="post" action="{{ $actionURL }}" enctype="multipart/form-data">
            @csrf
            <input type="hidden" name="depth" id="depth" value="" />
            <table class="table table-bordered table-sm text-nowrap table-nowrap">
                <thead>
                    <tr>
                        <th colspan="2">메뉴명</th>
                        <th>메뉴 위치</th>
                        <th>속성</th>
                        <th>PC</th>
                        <th>모바일</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td colspan="2">
                            <input type="text" name="name" class="form-control" value=""/>
                        </td>
                        <td>
                            <select name="menu_id" id="menuID" class="form-select input-menu" data-depth="1">
                                <option value="">최상위</option>
                                @foreach($menuData->list as $mn)
                                @php
                                    $tab = ($mn->depth > 0 ? '┗' : '') . str_repeat('━', $mn->depth) . ($mn->depth > 0 ? '>' : '');
                                @endphp
                                <option value="{{ $mn->id }}" data-depth="{{ $mn->depth }}">
                                    {{ $tab . $mn->name }}
                                </option>
                                @endforeach
                            </select>
                        </td>
                        <td>
                            <input type="text" name="custom" class="form-control" value=""/>
                        </td>
                        <td>
                            <select name="desktop" class="form-select">
                                <option value="1">사용함</option>
                                <option value="0">사용안함</option>
                            </select>
                        </td>
                        <td>
                            <select name="mobile" class="form-select">
                                <option value="1">사용함</option>
                                <option value="0">사용안함</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <th colspan="4">URL</th>
                        <th>아이콘</th>
                        <th>새창 여부</th>
                    </tr>
                    <tr>
                        <td colspan="4">
                            <input type="text" name="link" class="form-control" value=""/>
                        </td>
                        <td>
                            <input type="text" name="icon" class="form-control" value=""/>
                        </td>
                        <td>
                            <select name="target" class="form-control">
                                <option value="0">현재창</option>
                                <option value="1">새창</option>
                            </select>
                        </td>
                    </tr>
                </tbody>
            </table>
            <div class="text-end">
                <button type="submit" class="btn btn-success">저장하기</button>
            </div>
        </form>
    </div>
</div>

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

        document.f_admin_write.depth.value = depth;
        return true;
    }
});
</script>
@endsection
