@extends('layouts.admin')

@section('title', '새 메뉴 등록 - Admin Pro')

@section('content')
<div class="row justify-content-center">
    <div class="col-12 col-lg-8">
        
        <div class="card border-0 shadow-sm rounded-4">
            <div class="card-body p-4 p-md-5">
                
                <div class="d-flex justify-content-between align-items-center mb-4 pb-3 border-bottom">
                    <h4 class="fw-bold m-0 text-dark">
                        <i class="bi bi-plus-circle-fill text-primary me-2"></i>새 메뉴 등록
                    </h4>
                    <a href="{{ route('admin.menus.index') }}" class="btn btn-light btn-sm border text-secondary px-3">
                        <i class="bi bi-arrow-left me-1"></i>목록으로
                    </a>
                </div>

                @if ($errors->any())
                <div class="alert alert-danger border-0 rounded-3 mb-4 shadow-sm">
                    <ul class="mb-0 ps-3 small fw-medium">
                        @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
                @endif

                <form action="{{ route('admin.menus.store') }}" method="POST">
                    @csrf
                    
                    <div class="row g-4">
                        <div class="col-md-6">
                            <label class="form-label small fw-bold text-secondary">메뉴명</label>
                            <div class="input-group">
                                <span class="input-group-text bg-white text-muted border-end-0"><i class="bi bi-tag"></i></span>
                                <input type="text" name="name" class="form-control border-start-0 ps-0 py-2" value="{{ old('name') }}" required placeholder="예: 회원 관리">
                            </div>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label small fw-bold text-secondary">아이콘 클래스</label>
                            <div class="input-group">
                                <span class="input-group-text bg-white text-muted border-end-0"><i class="bi bi-emoji-smile"></i></span>
                                <input type="text" name="icon" class="form-control border-start-0 ps-0 py-2" value="{{ old('icon') }}" placeholder="예: bi bi-people-fill">
                                <a href="https://icons.getbootstrap.com/" target="_blank" class="btn btn-outline-secondary py-2"><i class="bi bi-search"></i></a>
                            </div>
                            <div class="form-text mt-1" style="font-size: 0.75rem;">부트스트랩 아이콘 클래스명을 입력하세요.</div>
                        </div>

                        <div class="col-12">
                            <label class="form-label small fw-bold text-secondary">연결 주소 (URL)</label>
                            <div class="input-group">
                                <span class="input-group-text bg-white text-muted border-end-0"><i class="bi bi-link-45deg"></i></span>
                                <input type="text" name="url" class="form-control border-start-0 ps-0 py-2" value="{{ old('url') }}" placeholder="예: /admin/users (1단 메뉴가 하위 메뉴를 가질 경우 비워둠)">
                            </div>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label small fw-bold text-secondary">소속 (부모 메뉴)</label>
                            <div class="input-group">
                                <span class="input-group-text bg-white text-muted border-end-0"><i class="bi bi-node-plus"></i></span>
                                <select name="parent_id" class="form-select border-start-0 ps-0 py-2">
                                    <option value="" selected>최상위(1단) 메뉴로 등록</option>
                                    @foreach($parentMenus as $parent)
                                        <option value="{{ $parent->id }}">{{ $parent->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label small fw-bold text-secondary">정렬 순서</label>
                            <div class="input-group">
                                <span class="input-group-text bg-white text-muted border-end-0"><i class="bi bi-sort-numeric-down"></i></span>
                                <input type="number" name="sort_order" class="form-control border-start-0 ps-0 py-2" value="{{ old('sort_order', 0) }}" required>
                            </div>
                        </div>

                        <div class="col-12 mt-5">
                            <div class="p-4 rounded-4 border bg-light-subtle">
                                <h6 class="fw-bold mb-3 text-dark small"><i class="bi bi-shield-lock-fill text-danger me-2"></i>접근 권한 설정</h6>
                                <p class="text-muted mb-4 small">이 메뉴를 볼 수 있는 최소 권한을 선택하세요. 선택하지 않으면 누구나 볼 수 있습니다.</p>
                                
                                <div class="row g-3">
                                    @foreach($permissions as $permission)
                                    <div class="col-sm-6 col-md-4">
                                        <div class="form-check form-check-inline m-0">
                                            <input class="form-check-input" type="radio" name="permission_name" id="perm_{{ $permission->id }}" value="{{ $permission->name }}">
                                            <label class="form-check-label small" for="perm_{{ $permission->id }}">
                                                {{ $permission->name }}
                                            </label>
                                        </div>
                                    </div>
                                    @endforeach
                                    <div class="col-12 border-top pt-3">
                                        <div class="form-check form-check-inline m-0">
                                            <input class="form-check-input" type="radio" name="permission_name" id="perm_none" value="" checked>
                                            <label class="form-check-label small fw-bold text-primary" for="perm_none">
                                                제한 없음 (모든 관리자 허용)
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-12 mt-5">
                            <button type="submit" class="btn btn-primary w-100 py-3 rounded-3 fw-bold shadow-sm">
                                <i class="bi bi-check-lg me-1"></i>메뉴 생성 및 저장
                            </button>
                        </div>
                    </div>
                </form>

            </div>
        </div>
        
    </div>
</div>
@endsection