@extends('layouts.app')

@section('title', 'Menu Management')
@section('page-title', 'Menu Management')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="custom-card">
                <div class="custom-card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">
                            <i class="fas fa-bars me-2"></i>
                            Menu Management
                        </h5>
                        <div class="d-flex align-items-center gap-3">
                            <div class="menu-search-wrapper">
                                <div class="input-group menu-search-rounded" style="width: 220px;">
                                    <span class="input-group-text bg-white border-end-0 rounded-start-pill">
                                        <i class="fas fa-search text-muted"></i>
                                    </span>
                                    <input type="text" id="menuPageSearch" class="form-control border-start-0 border-end-0" placeholder="Search..." autocomplete="off">
                                    <button type="button" class="btn btn-outline-secondary border-start-0 rounded-end-pill" id="menuPageSearchClear" style="display: none;">
                                        <i class="fas fa-times"></i>
                                    </button>
                                </div>
                            </div>
                            @php
                                $currentUser = auth()->user();
                                $isSuperUser = \App\Helpers\PermissionHelper::isSuperUser($currentUser->id);
                                
                                // Check if user is admin or has admin role
                                $isAdmin = false;
                                if (in_array(strtolower($currentUser->role), ['admin', 'administrator'])) {
                                    $isAdmin = true;
                                }
                                
                                // Check if user is subordinate of admin (has parent_id)
                                $isSubordinate = !is_null($currentUser->parent_id);
                                
                                // Show controls only for super users
                                $showControls = $isSuperUser;
                            @endphp
                            @if($showControls)
                                <a href="{{ route('menus.create') }}" class="btn btn-primary btn-custom">
                                    <i class="fas fa-plus me-2"></i>Add New Menu
                                </a>
                            @endif
                        </div>
                    </div>
                </div>
                <div class="custom-card-body">
                    @if(session('success'))
                        <div class="alert alert-success alert-dismissible fade show" role="alert">
                            {{ session('success') }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    @endif

                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead class="table-dark">
                                <tr>
                                    <th width="{{ $showControls ? '25%' : '30%' }}">Menu Name</th>
                                    <th width="{{ $showControls ? '8%' : '10%' }}">Icon</th>
                                    <th width="{{ $showControls ? '12%' : '15%' }}">Section</th>
                                    <th width="{{ $showControls ? '15%' : '20%' }}">Route/URL</th>
                                    <th width="{{ $showControls ? '10%' : '12%' }}">Parent</th>
                                    <th width="8%">Order</th>
                                    <th width="{{ $showControls ? '8%' : '15%' }}">Status</th>
                                    @if($showControls)
                                        <th width="14%">Actions</th>
                                    @endif
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($menus as $menu)
                                    <tr class="table-primary">
                                        <td>
                                            <div class="d-flex align-items-center">
                                                @if($menu->icon)
                                                    <i class="{{ $menu->icon }} me-2 text-primary"></i>
                                                @endif
                                                <div>
                                                    <strong class="text-primary">{{ $menu->name }}</strong>
                                                    @if($menu->is_dropdown)
                                                        <br><small class="badge bg-info">Dropdown Menu</small>
                                                    @endif
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            @if($menu->icon)
                                                <i class="{{ $menu->icon }} text-primary"></i>
                                            @else
                                                <span class="text-muted">-</span>
                                            @endif
                                        </td>
                                        <td>
                                            @if($menu->section)
                                                <span class="badge bg-light text-dark">{{ $menu->section }}</span>
                                            @else
                                                <span class="text-muted">-</span>
                                            @endif
                                        </td>
                                        <td>
                                            @if($menu->route)
                                                <code class="bg-light p-1 rounded">{{ $menu->route }}</code>
                                            @elseif($menu->url)
                                                <code class="bg-light p-1 rounded">{{ $menu->url }}</code>
                                            @else
                                                <span class="text-muted">-</span>
                                            @endif
                                        </td>
                                        <td>
                                            <span class="text-muted">Main Menu</span>
                                        </td>
                                        <td>
                                            <span class="badge bg-secondary">{{ $menu->sort_order }}</span>
                                        </td>
                                        <td>
                                            @if($menu->is_active)
                                                <span class="badge bg-success">
                                                    <i class="fas fa-check-circle me-1"></i>Active
                                                </span>
                                            @else
                                                <span class="badge bg-danger">
                                                    <i class="fas fa-times-circle me-1"></i>Inactive
                                                </span>
                                            @endif
                                        </td>
                                        @if($showControls)
                                            <td>
                                                <div class="btn-group" role="group">
                                                    <a href="{{ route('menus.edit', $menu) }}" class="btn btn-sm btn-outline-primary" title="Edit">
                                                        <i class="fas fa-edit"></i>
                                                    </a>
                                                    <form action="{{ route('menus.destroy', $menu) }}" method="POST" class="d-inline" onsubmit="return confirm('Are you sure you want to delete this menu and all its children?')">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button type="submit" class="btn btn-sm btn-outline-danger" title="Delete">
                                                            <i class="fas fa-trash"></i>
                                                        </button>
                                                    </form>
                                                </div>
                                            </td>
                                        @endif
                                    </tr>
                                    @if($menu->children->count() > 0)
                                        @foreach($menu->children as $child)
                                            <tr class="table-light">
                                                <td class="ps-4">
                                                    <div class="d-flex align-items-center">
                                                        <i class="fas fa-level-down-alt me-2 text-muted"></i>
                                                        @if($child->icon)
                                                            <i class="{{ $child->icon }} me-2 text-muted"></i>
                                                        @endif
                                                        <span class="text-muted">{{ $child->name }}</span>
                                                    </div>
                                                </td>
                                                <td>
                                                    @if($child->icon)
                                                        <i class="{{ $child->icon }} text-muted"></i>
                                                    @else
                                                        <span class="text-muted">-</span>
                                                    @endif
                                                </td>
                                                <td>
                                                    @if($child->section)
                                                        <span class="badge bg-light text-dark">{{ $child->section }}</span>
                                                    @else
                                                        <span class="text-muted">-</span>
                                                    @endif
                                                </td>
                                                <td>
                                                    @if($child->route)
                                                        <code class="bg-light p-1 rounded">{{ $child->route }}</code>
                                                    @elseif($child->url)
                                                        <code class="bg-light p-1 rounded">{{ $child->url }}</code>
                                                    @else
                                                        <span class="text-muted">-</span>
                                                    @endif
                                                </td>
                                                <td>
                                                    <small class="text-muted">{{ $child->parent->name }}</small>
                                                </td>
                                                <td>
                                                    <span class="badge bg-light text-dark">{{ $child->sort_order }}</span>
                                                </td>
                                                <td>
                                                    @if($child->is_active)
                                                        <span class="badge bg-success">
                                                            <i class="fas fa-check-circle me-1"></i>Active
                                                        </span>
                                                    @else
                                                        <span class="badge bg-danger">
                                                            <i class="fas fa-times-circle me-1"></i>Inactive
                                                        </span>
                                                    @endif
                                                </td>
                                                @if($showControls)
                                                    <td>
                                                        <div class="btn-group" role="group">
                                                            <a href="{{ route('menus.edit', $child) }}" class="btn btn-sm btn-outline-primary" title="Edit">
                                                                <i class="fas fa-edit"></i>
                                                            </a>
                                                            <form action="{{ route('menus.destroy', $child) }}" method="POST" class="d-inline" onsubmit="return confirm('Are you sure you want to delete this menu?')">
                                                                @csrf
                                                                @method('DELETE')
                                                                <button type="submit" class="btn btn-sm btn-outline-danger" title="Delete">
                                                                    <i class="fas fa-trash"></i>
                                                                </button>
                                                            </form>
                                                        </div>
                                                    </td>
                                                @endif
                                            </tr>
                                        @endforeach
                                    @endif
                                @empty
                                    <tr>
                                        <td colspan="{{ $showControls ? '8' : '7' }}" class="text-center text-muted py-5">
                                            <div class="py-4">
                                                <i class="fas fa-bars fa-4x text-muted mb-3"></i>
                                                <h5 class="text-muted">No Menus Found</h5>
                                                @if($showControls)
                                                    <p class="text-muted">Start by creating your first menu item.</p>
                                                    <a href="{{ route('menus.create') }}" class="btn btn-primary">
                                                        <i class="fas fa-plus me-2"></i>Create First Menu
                                                    </a>
                                                @else
                                                    <p class="text-muted">No menu items available.</p>
                                                @endif
                                            </div>
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('styles')
<style>
.menu-search-wrapper .menu-search-rounded {
    border-radius: 100px !important;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border: 1px solid #dee2e6;
}

.menu-search-wrapper .menu-search-rounded .input-group-text {
    border-radius: 100px 0 0 100px !important;
    border-right: none !important;
    padding-left: 0.9rem;
    padding-right: 0.4rem;
    background-color: #fff;
}

.menu-search-wrapper .menu-search-rounded input#menuPageSearch {
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    padding-left: 0.3rem;
    padding-right: 0.3rem;
    border-top: none;
    border-bottom: none;
}

.menu-search-wrapper .menu-search-rounded input#menuPageSearch:focus {
    border-color: transparent !important;
    box-shadow: none !important;
}

.menu-search-wrapper .menu-search-rounded button#menuPageSearchClear {
    border-radius: 0 100px 100px 0 !important;
    border-left: none !important;
    padding-left: 0.4rem;
    padding-right: 0.7rem;
    background-color: #fff;
}

.menu-search-wrapper .menu-search-rounded:focus-within {
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    border-color: #86b7fe;
}

.menu-search-wrapper .menu-search-rounded .input-group-text,
.menu-search-wrapper .menu-search-rounded input#menuPageSearch,
.menu-search-wrapper .menu-search-rounded button#menuPageSearchClear {
    height: 32px;
    font-size: 0.8rem;
}

.menu-search-wrapper .menu-search-rounded .input-group-text i {
    font-size: 0.75rem;
}

.menu-search-wrapper .menu-search-rounded input#menuPageSearch {
    padding-left: 0.3rem;
    padding-right: 0.3rem;
    font-size: 0.8rem;
}

.menu-search-wrapper .menu-search-rounded button#menuPageSearchClear {
    padding-left: 0.4rem;
    padding-right: 0.7rem;
    font-size: 0.75rem;
}
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const menuSearchInput = document.getElementById('menuPageSearch');
    const menuSearchClear = document.getElementById('menuPageSearchClear');
    
    if (!menuSearchInput) return;
    
    // Filter table rows based on search
    function filterMenusTable(searchTerm) {
        const table = document.querySelector('.table-responsive table');
        if (!table) return;
        
        const rows = table.querySelectorAll('tbody tr');
        const searchLower = searchTerm.toLowerCase().trim();
        
        let visibleCount = 0;
        
        rows.forEach(row => {
            const text = row.textContent.toLowerCase();
            const shouldShow = searchLower === '' || text.includes(searchLower);
            
            if (shouldShow) {
                row.style.display = '';
                visibleCount++;
            } else {
                row.style.display = 'none';
            }
        });
        
        // Show/hide empty message
        const emptyRow = table.querySelector('tbody tr td[colspan]');
        if (emptyRow && visibleCount === 0 && searchLower !== '') {
            // Create a "no results" message if it doesn't exist
            let noResultsRow = table.querySelector('tbody tr.no-results');
            if (!noResultsRow) {
                noResultsRow = document.createElement('tr');
                noResultsRow.className = 'no-results';
                const cell = document.createElement('td');
                cell.colSpan = table.querySelector('thead tr').children.length;
                cell.className = 'text-center text-muted py-5';
                cell.innerHTML = `
                    <div class="py-4">
                        <i class="fas fa-search fa-3x text-muted mb-3"></i>
                        <h5 class="text-muted">No menus found matching "${searchTerm}"</h5>
                        <p class="text-muted">Try a different search term.</p>
                    </div>
                `;
                noResultsRow.appendChild(cell);
                table.querySelector('tbody').appendChild(noResultsRow);
            }
            noResultsRow.style.display = '';
        } else {
            const noResultsRow = table.querySelector('tbody tr.no-results');
            if (noResultsRow) {
                noResultsRow.style.display = 'none';
            }
            if (emptyRow && searchLower === '') {
                emptyRow.closest('tr').style.display = '';
            }
        }
    }
    
    // Handle search input
    menuSearchInput.addEventListener('input', function(e) {
        const searchTerm = e.target.value;
        filterMenusTable(searchTerm);
        
        // Show/hide clear button
        if (searchTerm.length > 0) {
            menuSearchClear.style.display = 'block';
        } else {
            menuSearchClear.style.display = 'none';
        }
    });
    
    // Handle clear button
    menuSearchClear.addEventListener('click', function() {
        menuSearchInput.value = '';
        menuSearchClear.style.display = 'none';
        filterMenusTable('');
        menuSearchInput.focus();
    });
    
    // Handle Escape key
    menuSearchInput.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            menuSearchInput.value = '';
            menuSearchClear.style.display = 'none';
            filterMenusTable('');
            menuSearchInput.blur();
        }
    });
});
</script>
@endpush
@endsection