@extends('admin.layout')

@section('content')
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h4>Menu Management</h4>
        <button class="btn menu-save-btn" data-bs-toggle="modal" data-bs-target="#addMenuModal">
            <i class="fa-solid fa-plus"></i> Add Menu Item
        </button>
    </div>

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

    @if ($errors->any())
        <div class="alert alert-danger">
            <ul class="mb-0">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <div class="card">
        <table class="table mb-0">
            <thead>
                <tr>
                    <th>Title</th>
                    <th>URL</th>
                    <th>Order</th>
                    <th>Status</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                @foreach($menus as $menu)
                    <tr class="{{ $menu->children->count() ? 'menu-parent-row' : '' }}"
                        @if($menu->children->count()) style="cursor:pointer;" onclick="toggleChildren(event, {{ $menu->id }})" @endif>
                        <td>
                            @if($menu->children->count())
                                <i class="fa-solid fa-chevron-right me-2 menu-chevron" id="chevron-{{ $menu->id }}"></i>
                            @endif
                            <strong>{{ $menu->title }}</strong>
                        </td>
                        <td>{{ $menu->url }}</td>
                        <td>{{ $menu->order }}</td>
                        <td>
                            @if($menu->is_active)
                                <span class="badge bg-success">Active</span>
                            @else
                                <span class="badge bg-secondary">Inactive</span>
                            @endif
                        </td>
                        <td onclick="event.stopPropagation()">
                            <button type="button" class="btn btn-sm btn-outline-primary" title="Edit"  data-bs-toggle="modal"
                                data-bs-target="#editMenuModal{{ $menu->id }}">
                                <i class="fa-solid fa-pen"></i>
                            </button>
                            <form method="POST" action="{{ route('admin.menus.destroy', $menu) }}" class="d-inline"
                                onsubmit="return confirm('Delete this menu item?')">
                                @csrf
                                @method('DELETE')
                                <button class="btn btn-sm btn-outline-danger" title="Delete">
                                  <i class="fa-solid fa-trash"></i>
                                </button>
                            </form>
                        </td>
                    </tr>

                    @foreach($menu->children as $child)
                        <tr class="menu-child-row" id="child-{{ $menu->id }}" style="display:none;">
                            <td class="ps-4">— {{ $child->title }}</td>
                            <td>{{ $child->url }}</td>
                            <td>{{ $child->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>
                                <button type="button" class="btn btn-sm btn-outline-primary" data-bs-toggle="modal"
                                    data-bs-target="#editMenuModal{{ $child->id }}">
                                    Edit
                                </button>
                                <form method="POST" action="{{ route('admin.menus.destroy', $child) }}" class="d-inline"
                                    onsubmit="return confirm('Delete this menu item?')">
                                    @csrf
                                    @method('DELETE')
                                    <button class="btn btn-sm btn-outline-danger">Delete</button>
                                </form>
                            </td>
                        </tr>
                    @endforeach
                @endforeach
            </tbody>
        </table>
    </div>

    {{-- ===================== ADD MENU MODAL ===================== --}}
    <div class="modal fade" id="addMenuModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <form method="POST" action="{{ route('admin.menus.store') }}">
                    @csrf
                    <div class="modal-header">
                        <h5 class="modal-title">Add Menu Item</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-3">
                            <label class="form-label">Title</label>
                            <input type="text" name="title" class="form-control" required>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">URL (e.g. /about or #)</label>
                            <input type="text" name="url" class="form-control" value="#">
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Parent Menu (dropdown optional)</label>
                            <select name="parent_id" class="form-select">
                                <option value="">-- None (Top Level) --</option>
                                @foreach($parents as $parent)
                                    <option value="{{ $parent->id }}">{{ $parent->title }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Order</label>
                            <input type="number" name="order" class="form-control" value="0">
                        </div>

                        <div class="form-check mb-0">
                            <input type="checkbox" name="is_active" value="1" class="form-check-input" checked>
                            <label class="form-check-label">Active</label>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn menu-save-btn">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- ===================== EDIT MENU MODALS (parents) ===================== --}}
    @foreach($menus as $menu)
        <div class="modal fade" id="editMenuModal{{ $menu->id }}" tabindex="-1">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <form method="POST" action="{{ route('admin.menus.update', $menu) }}">
                        @csrf
                        @method('PUT')
                        <div class="modal-header">
                            <h5 class="modal-title">Edit Menu Item</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>
                        <div class="modal-body">
                            <div class="mb-3">
                                <label class="form-label">Title</label>
                                <input type="text" name="title" class="form-control" value="{{ $menu->title }}" required>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">URL</label>
                                <input type="text" name="url" class="form-control" value="{{ $menu->url }}">
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Parent Menu</label>
                                <select name="parent_id" class="form-select">
                                    <option value="">-- None (Top Level) --</option>
                                    @foreach($parents as $parent)
                                        @if($parent->id !== $menu->id)
                                            <option value="{{ $parent->id }}" {{ $menu->parent_id == $parent->id ? 'selected' : '' }}>
                                                {{ $parent->title }}
                                            </option>
                                        @endif
                                    @endforeach
                                </select>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Order</label>
                                <input type="number" name="order" class="form-control" value="{{ $menu->order }}">
                            </div>

                            <div class="form-check mb-0">
                                <input type="checkbox" name="is_active" value="1" class="form-check-input" {{ $menu->is_active ? 'checked' : '' }}>
                                <label class="form-check-label">Active</label>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                            <button type="submit" class="btn menu-save-btn">Update</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        {{-- ===================== EDIT MENU MODALS (children of this menu) ===================== --}}
        @foreach($menu->children as $child)
            <div class="modal fade" id="editMenuModal{{ $child->id }}" tabindex="-1">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <form method="POST" action="{{ route('admin.menus.update', $child) }}">
                            @csrf
                            @method('PUT')
                            <div class="modal-header">
                                <h5 class="modal-title">Edit Menu Item</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                            </div>
                            <div class="modal-body">
                                <div class="mb-3">
                                    <label class="form-label">Title</label>
                                    <input type="text" name="title" class="form-control" value="{{ $child->title }}" required>
                                </div>

                                <div class="mb-3">
                                    <label class="form-label">URL</label>
                                    <input type="text" name="url" class="form-control" value="{{ $child->url }}">
                                </div>

                                <div class="mb-3">
                                    <label class="form-label">Parent Menu</label>
                                    <select name="parent_id" class="form-select">
                                        <option value="">-- None (Top Level) --</option>
                                        @foreach($parents as $parent)
                                            <option value="{{ $parent->id }}" {{ $child->parent_id == $parent->id ? 'selected' : '' }}>
                                                {{ $parent->title }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="mb-3">
                                    <label class="form-label">Order</label>
                                    <input type="number" name="order" class="form-control" value="{{ $child->order }}">
                                </div>

                                <div class="form-check mb-0">
                                    <input type="checkbox" name="is_active" value="1" class="form-check-input" {{ $child->is_active ? 'checked' : '' }}>
                                    <label class="form-check-label">Active</label>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                                <button type="submit" class="btn menu-save-btn">Update</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        @endforeach
    @endforeach

    <style>
        .menu-save-btn {
            background-color: #1c1d46;
            color: #fff;
            border: none;
        }

        .menu-save-btn:hover {
            background-color: #14152f;
            color: #fff;
        }

        .menu-parent-row:hover {
            background-color: #f8f9fa;
        }

        .menu-chevron {
            transition: transform 0.25s ease;
            display: inline-block;
        }

        .menu-chevron.rotated {
            transform: rotate(90deg);
        }

        .menu-child-row {
            background-color: #fcfcfc;
        }
    </style>

    <script>
        function toggleChildren(event, menuId) {
            const childRows = document.querySelectorAll('#child-' + menuId);
            const chevron = document.getElementById('chevron-' + menuId);
            const isHidden = childRows[0] && childRows[0].style.display === 'none';

            childRows.forEach(function (row) {
                row.style.display = isHidden ? 'table-row' : 'none';
            });

            if (chevron) {
                chevron.classList.toggle('rotated', isHidden);
            }
        }
    </script>
@endsection