@extends('admin.layouts.app')

@section('title', 'Menu Item Details')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h1 class="h3">Menu Item Details</h1>
                <div>
                    <a href="{{ route('admin.menus.edit', $menu) }}" class="btn btn-warning me-2">
                        <i class="bi bi-pencil"></i> Edit
                    </a>
                    <a href="{{ route('admin.menus.index') }}" class="btn btn-secondary">
                        <i class="bi bi-arrow-left"></i> Back to Menu List
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">
                        @if($menu->icon)
                            <i class="{{ $menu->icon }} me-2"></i>
                        @endif
                        {{ $menu->title }}
                    </h5>
                    <div>
                        @if($menu->is_active)
                            <span class="badge bg-success">Active</span>
                        @else
                            <span class="badge bg-secondary">Inactive</span>
                        @endif
                        @if($menu->is_external)
                            <span class="badge bg-info">External</span>
                        @endif
                    </div>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <table class="table table-borderless">
                                <tr>
                                    <td class="fw-bold" style="width: 30%;">Title:</td>
                                    <td>{{ $menu->title }}</td>
                                </tr>
                                <tr>
                                    <td class="fw-bold">Icon:</td>
                                    <td>
                                        @if($menu->icon)
                                            <i class="{{ $menu->icon }} me-2"></i>
                                            <code>{{ $menu->icon }}</code>
                                        @else
                                            <span class="text-muted">No icon</span>
                                        @endif
                                    </td>
                                </tr>
                                <tr>
                                    <td class="fw-bold">Parent:</td>
                                    <td>
                                        @if($menu->parent)
                                            <a href="{{ route('admin.menus.show', $menu->parent) }}" class="text-decoration-none">
                                                @if($menu->parent->icon)
                                                    <i class="{{ $menu->parent->icon }} me-1"></i>
                                                @endif
                                                {{ $menu->parent->title }}
                                            </a>
                                        @else
                                            <span class="text-muted">Top Level Menu</span>
                                        @endif
                                    </td>
                                </tr>
                                <tr>
                                    <td class="fw-bold">Sort Order:</td>
                                    <td>{{ $menu->sort_order }}</td>
                                </tr>
                            </table>
                        </div>
                        <div class="col-md-6">
                            <table class="table table-borderless">
                                <tr>
                                    <td class="fw-bold" style="width: 30%;">Link Type:</td>
                                    <td>
                                        @if($menu->route_name)
                                            <span class="badge bg-primary">Internal Route</span>
                                        @else
                                            <span class="badge bg-info">Custom URL</span>
                                        @endif
                                    </td>
                                </tr>
                                <tr>
                                    <td class="fw-bold">Route/URL:</td>
                                    <td>
                                        @if($menu->route_name)
                                            <code>{{ $menu->route_name }}</code>
                                        @elseif($menu->url)
                                            <a href="{{ $menu->url }}" target="{{ $menu->target }}" class="text-decoration-none">
                                                {{ $menu->url }}
                                                @if($menu->target === '_blank')
                                                    <i class="bi bi-box-arrow-up-right ms-1"></i>
                                                @endif
                                            </a>
                                        @else
                                            <span class="text-muted">No link</span>
                                        @endif
                                    </td>
                                </tr>
                                <tr>
                                    <td class="fw-bold">Target:</td>
                                    <td>
                                        @if($menu->target === '_blank')
                                            <span class="badge bg-secondary">New Window</span>
                                        @else
                                            <span class="badge bg-light text-dark">Same Window</span>
                                        @endif
                                    </td>
                                </tr>
                                <tr>
                                    <td class="fw-bold">Status:</td>
                                    <td>
                                        @if($menu->is_active)
                                            <span class="badge bg-success">Active</span>
                                        @else
                                            <span class="badge bg-secondary">Inactive</span>
                                        @endif
                                        @if($menu->is_external)
                                            <span class="badge bg-info ms-1">External</span>
                                        @endif
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    
                    @if($menu->description)
                    <div class="mt-3">
                        <h6>Description:</h6>
                        <p class="text-muted">{{ $menu->description }}</p>
                    </div>
                    @endif
                    
                    @if($menu->url)
                    <div class="mt-3">
                        <h6>Preview Link:</h6>
                        <a href="{{ $menu->url }}" target="{{ $menu->target }}" class="btn btn-outline-primary btn-sm">
                            <i class="bi bi-link-45deg"></i> Open Link
                            @if($menu->target === '_blank')
                                <i class="bi bi-box-arrow-up-right ms-1"></i>
                            @endif
                        </a>
                    </div>
                    @endif
                </div>
            </div>
            
            @if($menu->children->count() > 0)
            <div class="card mt-4">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="bi bi-diagram-3 me-2"></i>
                        Child Menu Items ({{ $menu->children->count() }})
                    </h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>Title</th>
                                    <th>Icon</th>
                                    <th>Link</th>
                                    <th>Order</th>
                                    <th>Status</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($menu->children->sortBy('sort_order') as $child)
                                <tr>
                                    <td>
                                        @if($child->icon)
                                            <i class="{{ $child->icon }} me-2"></i>
                                        @endif
                                        {{ $child->title }}
                                    </td>
                                    <td>
                                        @if($child->icon)
                                            <code class="small">{{ $child->icon }}</code>
                                        @else
                                            <span class="text-muted">-</span>
                                        @endif
                                    </td>
                                    <td>
                                        @if($child->route_name)
                                            <span class="badge bg-primary small">{{ $child->route_name }}</span>
                                        @elseif($child->url)
                                            <span class="badge bg-info small">{{ Str::limit($child->url, 30) }}</span>
                                        @else
                                            <span class="text-muted">-</span>
                                        @endif
                                    </td>
                                    <td>{{ $child->sort_order }}</td>
                                    <td>
                                        @if($child->is_active)
                                            <span class="badge bg-success">Active</span>
                                        @else
                                            <span class="badge bg-secondary">Inactive</span>
                                        @endif
                                    </td>
                                    <td>
                                        <div class="btn-group btn-group-sm">
                                            <a href="{{ route('admin.menus.show', $child) }}" class="btn btn-outline-info" title="View">
                                                <i class="bi bi-eye"></i>
                                            </a>
                                            <a href="{{ route('admin.menus.edit', $child) }}" class="btn btn-outline-warning" title="Edit">
                                                <i class="bi bi-pencil"></i>
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            @endif
        </div>
        
        <div class="col-lg-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Menu Information</h5>
                </div>
                <div class="card-body">
                    <table class="table table-sm table-borderless">
                        <tr>
                            <td><strong>ID:</strong></td>
                            <td>{{ $menu->id }}</td>
                        </tr>
                        <tr>
                            <td><strong>Created:</strong></td>
                            <td>{{ $menu->created_at->format('M d, Y H:i') }}</td>
                        </tr>
                        <tr>
                            <td><strong>Updated:</strong></td>
                            <td>{{ $menu->updated_at->format('M d, Y H:i') }}</td>
                        </tr>
                        <tr>
                            <td><strong>Children:</strong></td>
                            <td>{{ $menu->children->count() }} item(s)</td>
                        </tr>
                        @if($menu->parent)
                        <tr>
                            <td><strong>Siblings:</strong></td>
                            <td>{{ $menu->parent->children->count() }} item(s)</td>
                        </tr>
                        @endif
                    </table>
                </div>
            </div>
            
            <div class="card mt-3">
                <div class="card-header">
                    <h5 class="mb-0">Quick Actions</h5>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <a href="{{ route('admin.menus.edit', $menu) }}" class="btn btn-warning">
                            <i class="bi bi-pencil"></i> Edit Menu Item
                        </a>
                        
                        <a href="{{ route('admin.menus.create') }}?parent_id={{ $menu->id }}" class="btn btn-success">
                            <i class="bi bi-plus-circle"></i> Add Child Menu
                        </a>
                        
                        @if($menu->children->count() === 0)
                        <form action="{{ route('admin.menus.destroy', $menu) }}" method="POST" 
                              onsubmit="return confirm('Are you sure you want to delete this menu item?')">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn btn-danger">
                                <i class="bi bi-trash"></i> Delete Menu Item
                            </button>
                        </form>
                        @else
                        <button type="button" class="btn btn-danger" disabled title="Cannot delete menu with children">
                            <i class="bi bi-trash"></i> Delete Menu Item
                        </button>
                        <small class="text-muted">Cannot delete menu with child items</small>
                        @endif
                    </div>
                </div>
            </div>
            
            @if($menu->parent)
            <div class="card mt-3">
                <div class="card-header">
                    <h5 class="mb-0">Parent Menu</h5>
                </div>
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        @if($menu->parent->icon)
                            <i class="{{ $menu->parent->icon }} me-2"></i>
                        @endif
                        <div>
                            <strong>{{ $menu->parent->title }}</strong><br>
                            <small class="text-muted">
                                @if($menu->parent->route_name)
                                    Route: {{ $menu->parent->route_name }}
                                @elseif($menu->parent->url)
                                    URL: {{ Str::limit($menu->parent->url, 30) }}
                                @endif
                            </small>
                        </div>
                    </div>
                    <div class="mt-2">
                        <a href="{{ route('admin.menus.show', $menu->parent) }}" class="btn btn-outline-primary btn-sm">
                            <i class="bi bi-eye"></i> View Parent
                        </a>
                    </div>
                </div>
            </div>
            @endif
        </div>
    </div>
</div>
@endsection