@php use Illuminate\Support\Str; @endphp
@extends('admin.layouts.app')

@section('title', 'Menus')

@section('content')
<div class="action-bar">
    <h2 style="color:#fff;font-size:1.3rem;font-weight:700">Menus</h2>
    <a href="{{ route('admin.menus.create') }}" class="btn btn-primary">+ Add Menu</a>
</div>

@if(session('success'))
    <div class="alert alert-success">{{ session('success') }}</div>
@endif

@if($menus->isEmpty())
<div class="card" style="text-align:center;padding:40px">
    <p style="color:#9a9ab0">No menus yet. <a href="{{ route('admin.menus.create') }}" style="color:#f0c040">Add your first menu</a></p>
</div>
@else
<div class="card" style="padding:0;overflow:hidden">
    <table>
        <thead>
            <tr>
                <th style="width:40px">Order</th>
                <th>Name</th>
                <th>URL / Route</th>
                <th>Location</th>
                <th>Target</th>
                <th>Status</th>
                <th style="width:160px">Actions</th>
            </tr>
        </thead>
        <tbody>
            @foreach($menus as $menu)
            <tr>
                <td style="text-align:center">{{ $menu->order }}</td>
                <td>
                    <strong style="color:#fff">{{ $menu->icon ? $menu->icon . ' ' : '' }}{{ $menu->name }}</strong>
                    @if($menu->children->count())
                        <div style="margin-top:4px;padding-left:16px;border-left:2px solid #2a2a3e">
                            @foreach($menu->children as $child)
                                <div style="padding:2px 0;font-size:0.85rem;color:#9a9ab0">
                                    {{ $child->icon ? $child->icon . ' ' : '' }}{{ $child->name }}
                                    <span style="color:#5a5a7a;font-size:0.75rem">{{ Str::limit($child->url ?? $child->route_name, 40) }}</span>
                                </div>
                            @endforeach
                        </div>
                    @endif
                </td>
                <td style="font-size:0.8rem;color:#9a9ab0;max-width:250px;word-break:break-all">
                    @if($menu->route_name)
                        <span style="color:#5a7af0">{{ $menu->route_name }}</span>
                    @else
                        {{ $menu->url ?: '—' }}
                    @endif
                </td>
                <td><span class="badge badge-{{ $menu->location }}">{{ $menu->location }}</span></td>
                <td>{{ $menu->target === '_blank' ? 'New tab' : 'Same tab' }}</td>
                <td>
                    <span class="badge {{ $menu->is_active ? 'badge-completed' : 'badge-declined' }}">
                        {{ $menu->is_active ? 'Active' : 'Inactive' }}
                    </span>
                </td>
                <td>
                    <div class="inline-flex">
                        <a href="{{ route('admin.menus.edit', $menu) }}" class="btn btn-sm btn-primary">Edit</a>
                        <form method="POST" action="{{ route('admin.menus.destroy', $menu) }}" style="display:inline"
                              onsubmit="return confirm('Delete this menu? Its children will also be deleted.')">
                            @csrf @method('DELETE')
                            <button type="submit" class="btn btn-sm btn-danger">Delete</button>
                        </form>
                    </div>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
</div>
@endif

<style>
.badge-header { background:#1a2a4a; color:#5a9af0; }
.badge-footer { background:#2a1a3a; color:#b07af0; }
.badge-both { background:#1a3a2e; color:#6fcf97; }
</style>
@endsection
