@extends('admin.layout')
@section('title','Navigation Menu')
@section('page-title','Navigation Menu')

@section('content')
<div style="display:grid;grid-template-columns:1fr 360px;gap:20px;align-items:start;">

    <!-- Current menu tree -->
    <div class="card">
        <div class="card-header">
            <h3><i class="fas fa-bars" style="color:var(--red);margin-right:8px;"></i>Current Menu Structure</h3>
            <div style="font-size:12px;color:#94a3b8;">Drag to reorder (coming soon) · Toggle active/inactive · Delete</div>
        </div>
        <div class="card-body" style="padding:0;">
            @forelse($items as $item)
            <div style="padding:12px 18px;border-bottom:1px solid #f1f5f9;display:flex;align-items:center;gap:10px;">
                <i class="fas fa-grip-vertical" style="color:#cbd5e1;cursor:move;"></i>
                <div style="flex:1;">
                    <div style="font-size:13px;font-weight:700;color:{{ $item->is_active ? '#0f172a' : '#94a3b8' }};">{{ $item->label }}</div>
                    <div style="font-size:11px;color:#94a3b8;">{{ $item->url }}</div>
                </div>
                <span class="badge {{ $item->is_active ? 'badge-green' : 'badge-gray' }}">{{ $item->is_active ? 'Active' : 'Hidden' }}</span>
                <form method="POST" action="{{ route('admin.menu.toggle', $item) }}">@csrf <button type="submit" class="btn btn-outline btn-sm btn-icon" title="{{ $item->is_active ? 'Hide':'Show' }}"><i class="fas fa-{{ $item->is_active ? 'eye-slash':'eye' }}"></i></button></form>
                <form method="POST" action="{{ route('admin.menu.destroy', $item) }}" onsubmit="return confirm('Delete this menu item and all its children?')">@csrf @method('DELETE')
                    <button type="submit" class="btn btn-sm btn-icon" style="background:#fef2f2;color:#dc2626;border:none;"><i class="fas fa-trash"></i></button>
                </form>
            </div>

            @foreach($item->children as $child)
            <div style="padding:10px 18px 10px 48px;border-bottom:1px solid #f8fafc;display:flex;align-items:center;gap:10px;background:#fafafa;">
                <i class="fas fa-level-up-alt fa-rotate-90" style="color:#cbd5e1;font-size:11px;"></i>
                <div style="flex:1;">
                    <div style="font-size:12px;font-weight:600;color:{{ $child->is_active ? '#374151' : '#94a3b8' }};">{{ $child->label }}</div>
                    <div style="font-size:11px;color:#94a3b8;">{{ $child->url }}</div>
                </div>
                <span class="badge {{ $child->is_active ? 'badge-blue' : 'badge-gray' }}" style="font-size:10px;">{{ $child->is_active ? 'Active' : 'Hidden' }}</span>
                <form method="POST" action="{{ route('admin.menu.toggle', $child) }}">@csrf <button type="submit" class="btn btn-outline btn-sm btn-icon"><i class="fas fa-{{ $child->is_active ? 'eye-slash':'eye' }}"></i></button></form>
                <form method="POST" action="{{ route('admin.menu.destroy', $child) }}" onsubmit="return confirm('Delete?')">@csrf @method('DELETE')
                    <button type="submit" class="btn btn-sm btn-icon" style="background:#fef2f2;color:#dc2626;border:none;"><i class="fas fa-trash"></i></button>
                </form>
            </div>
            @endforeach
            @empty
            <div style="padding:40px;text-align:center;color:#94a3b8;">No menu items. Add some!</div>
            @endforelse
        </div>
    </div>

    <!-- Add new item -->
    <div>
        <div class="card" style="margin-bottom:16px;">
            <div class="card-header"><h3><i class="fas fa-plus" style="color:var(--red);margin-right:8px;"></i>Add Menu Item</h3></div>
            <div class="card-body">
                <form method="POST" action="{{ route('admin.menu.store') }}">
                    @csrf
                    <div class="form-group" style="margin-bottom:12px;">
                        <label>Label (display text) *</label>
                        <input type="text" name="label" required placeholder="e.g. Scholarship Guide" style="width:100%;padding:9px 12px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:13px;">
                    </div>
                    <div class="form-group" style="margin-bottom:12px;">
                        <label>URL / Link *</label>
                        <input type="text" name="url" required placeholder="/page/scholarship-guide" style="width:100%;padding:9px 12px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:13px;">
                        <div style="font-size:11px;color:#94a3b8;margin-top:4px;">Use /page/slug for custom pages, or any URL</div>
                    </div>
                    <div class="form-group" style="margin-bottom:12px;">
                        <label>Parent Menu (for dropdown)</label>
                        <select name="parent_id" style="width:100%;padding:9px 12px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:13px;">
                            <option value="">— Top Level —</option>
                            @foreach($parents as $p)
                            <option value="{{ $p->id }}">{{ $p->label }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group" style="margin-bottom:16px;">
                        <label>Open in</label>
                        <select name="target" style="width:100%;padding:9px 12px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:13px;">
                            <option value="_self">Same tab</option>
                            <option value="_blank">New tab</option>
                        </select>
                    </div>
                    <button type="submit" class="btn btn-primary" style="width:100%;"><i class="fas fa-plus"></i> Add to Menu</button>
                </form>
            </div>
        </div>

        <div class="card" style="background:var(--navy);border:none;">
            <div class="card-body">
                <div style="font-size:13px;font-weight:700;color:white;margin-bottom:10px;"><i class="fas fa-lightbulb" style="color:var(--gold);margin-right:6px;"></i>Quick Links</div>
                <div style="font-size:12px;color:rgba(255,255,255,0.5);">Create a custom page first, then add it here as a menu item using <code style="background:rgba(255,255,255,0.1);padding:1px 5px;border-radius:4px;">/page/your-slug</code></div>
                <div style="margin-top:12px;">
                    <a href="{{ route('admin.pages.create') }}" class="btn" style="background:var(--gold);color:var(--navy);font-size:12px;width:100%;justify-content:center;"><i class="fas fa-file-alt"></i> Create New Page</a>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection