@extends('layouts.admin')

@section('title', '메뉴 및 권한 관리 - Admin Pro')

@section('content')
<div class="card border-0 shadow-sm rounded-4">
    <div class="card-body p-4">
        
        <div class="d-flex justify-content-between align-items-center mb-4 pb-3 border-bottom">
            <h5 class="fw-bold m-0 text-dark">
                <i class="bi bi-list-nested text-secondary me-2"></i>메뉴 및 권한 관리
            </h5>
            <a href="{{ route('admin.menus.create') }}" class="btn btn-primary btn-sm rounded-3 px-3 fw-semibold shadow-sm">
                <i class="bi bi-plus-lg me-1"></i>새 메뉴 등록
            </a>
        </div>

        @if (session('success'))
        <div class="alert alert-success border-0 rounded-3 mb-4 shadow-sm">
            <i class="bi bi-check-circle-fill me-2"></i>{{ session('success') }}
        </div>
        @endif
        
        @if (session('error'))
        <div class="alert alert-danger border-0 rounded-3 mb-4 shadow-sm">
            <i class="bi bi-exclamation-triangle-fill me-2"></i>{{ session('error') }}
        </div>
        @endif

        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0 text-nowrap">
                <thead class="table-light">
                    <tr>
                        <th style="width: 25%; min-width: 180px;" class="py-3">메뉴명</th>
                        <th style="width: 25%; min-width: 200px;" class="py-3">연결 주소 (URL)</th>
                        <th style="width: 10%; text-align: center; min-width: 90px;" class="py-3">정렬 순서</th>
                        <th style="width: 20%; min-width: 160px;" class="py-3">접근 권한</th>
                        <th style="width: 20%; text-align: center; min-width: 140px;" class="py-3">관리</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($menus as $menu)
                        <tr class="table-light" style="border-bottom: 2px solid #fff;">
                            <td>
                                <span class="fw-bold text-dark">
                                    @if($menu->icon) <i class="{{ $menu->icon }} me-2 text-primary"></i> @endif
                                    {{ $menu->name }}
                                </span>
                            </td>
                            <td>
                                <span class="text-muted small">{{ $menu->url ?? '(하위 메뉴 포함)' }}</span>
                            </td>
                            <td style="text-align: center;">
                                <span class="badge bg-secondary rounded-pill px-2">{{ $menu->sort_order }}</span>
                            </td>
                            <td>
                                @if($menu->permission_name)
                                    <span class="badge bg-danger-subtle text-danger rounded-pill px-2.5 py-1.5"><i class="bi bi-shield-lock-fill me-1"></i>{{ $menu->permission_name }}</span>
                                @else
                                    <span class="badge bg-light text-muted border px-2.5 py-1.5">권한 제한 없음</span>
                                @endif
                            </td>
                            <td style="text-align: center;">
                                <a href="{{ route('admin.menus.edit', $menu->id) }}" class="btn btn-light btn-sm text-secondary border px-2 py-1 me-1"><i class="bi bi-pencil-square"></i></a>
                                <form action="{{ route('admin.menus.destroy', $menu->id) }}" method="POST" class="d-inline" onsubmit="return confirm('정말로 이 메뉴를 삭제하시겠습니까?\n하위 메뉴가 존재할 경우 함께 삭제됩니다.');">
                                    @csrf @method('DELETE')
                                    <button type="submit" class="btn btn-outline-danger btn-sm px-2 py-1"><i class="bi bi-trash3"></i></button>
                                </form>
                            </td>
                        </tr>

                        @foreach($menu->children as $child)
                        <tr>
                            <td>
                                <div class="d-flex align-items-center ms-3">
                                    <i class="bi bi-arrow-return-right text-muted me-2 opacity-50"></i>
                                    <span class="text-dark fw-medium">
                                        @if($child->icon) <i class="{{ $child->icon }} me-1 text-muted small"></i> @endif
                                        {{ $child->name }}
                                    </span>
                                </div>
                            </td>
                            <td>
                                <span class="text-primary small">{{ $child->url }}</span>
                            </td>
                            <td style="text-align: center;">
                                <span class="text-muted small">{{ $child->sort_order }}</span>
                            </td>
                            <td>
                                @if($child->permission_name)
                                    <span class="badge bg-info-subtle text-info-emphasis rounded-pill px-2.5 py-1.5"><i class="bi bi-shield-check me-1"></i>{{ $child->permission_name }}</span>
                                @else
                                    <span class="badge bg-light text-muted border px-2.5 py-1.5">권한 제한 없음</span>
                                @endif
                            </td>
                            <td style="text-align: center;">
                                <a href="{{ route('admin.menus.edit', $child->id) }}" class="btn btn-light btn-sm text-secondary border px-2 py-1 me-1"><i class="bi bi-pencil-square"></i></a>
                                <form action="{{ route('admin.menus.destroy', $child->id) }}" method="POST" class="d-inline" onsubmit="return confirm('이 하위 메뉴를 삭제하시겠습니까?');">
                                    @csrf @method('DELETE')
                                    <button type="submit" class="btn btn-outline-danger btn-sm px-2 py-1"><i class="bi bi-trash3"></i></button>
                                </form>
                            </td>
                        </tr>
                        @endforeach
                    @empty
                        <tr>
                            <td colspan="5" class="text-center py-5">
                                <div class="text-muted mb-2"><i class="bi bi-inbox fs-1 opacity-50"></i></div>
                                <span class="text-secondary fw-medium">등록된 메뉴가 없습니다. 우측 상단의 [새 메뉴 등록] 버튼을 눌러보세요.</span>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

    </div>
</div>
@endsection