@extends('layouts.admin')
@section('title', 'Menu Management')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <h4 class="fw-bold mb-0"><i class="bi bi-list-ul me-2" style="color:var(--primary)"></i>Menu Management</h4>
</div>

@if(session('success'))
<div class="alert alert-success alert-dismissible fade show"><i class="bi bi-check-circle me-2"></i>{{ session('success') }}<button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>
@endif

{{-- Tabs --}}
<ul class="nav nav-tabs mb-0" id="menuTabs">
    <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#tab-header">Header Menu</a></li>
    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tab-footer-quick">Footer Quick Links</a></li>
    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tab-footer-customer">Footer Customer Service</a></li>
</ul>

<form action="{{ route('admin.menus.update') }}" method="POST" id="menuForm">
@csrf @method('PUT')

<div class="tab-content border border-top-0 rounded-bottom bg-white p-4">

    {{-- ── HEADER MENU ── --}}
    <div class="tab-pane fade show active" id="tab-header">
        @include('admin.menu._table', ['items' => $header, 'location' => 'header', 'title' => 'Header Navigation'])
    </div>

    {{-- ── FOOTER QUICK LINKS ── --}}
    <div class="tab-pane fade" id="tab-footer-quick">
        @include('admin.menu._table', ['items' => $footerQ, 'location' => 'footer_quick', 'title' => 'Footer — Quick Links'])
    </div>

    {{-- ── FOOTER CUSTOMER SERVICE ── --}}
    <div class="tab-pane fade" id="tab-footer-customer">
        @include('admin.menu._table', ['items' => $footerC, 'location' => 'footer_customer', 'title' => 'Footer — Customer Service'])
    </div>

</div>

<div class="mt-3">
    <button type="submit" class="btn btn-danger px-4 fw-semibold">
        <i class="bi bi-save me-1"></i> Save All Changes
    </button>
</div>
</form>

{{-- Add New Item Modal --}}
<div class="modal fade" id="addMenuModal" tabindex="-1">
    <div class="modal-dialog">
        <form action="{{ route('admin.menus.store') }}" method="POST">
        @csrf
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title fw-bold">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 fw-semibold">Location <span class="text-danger">*</span></label>
                    <select name="location" id="addLocation" class="form-select" required>
                        <option value="header">Header Menu</option>
                        <option value="footer_quick">Footer Quick Links</option>
                        <option value="footer_customer">Footer Customer Service</option>
                    </select>
                </div>
                <div class="mb-3">
                    <label class="form-label fw-semibold">Label <span class="text-danger">*</span></label>
                    <input type="text" name="label" class="form-control" placeholder="e.g. About Us" required>
                </div>
                <div class="mb-3">
                    <label class="form-label fw-semibold">URL <span class="text-danger">*</span></label>
                    <input type="text" name="url" class="form-control" placeholder="/about" required>
                    <small class="text-muted">Relative: <code>/about</code> &nbsp;|&nbsp; External: <code>https://...</code></small>
                </div>
                <div class="mb-3">
                    <label class="form-label fw-semibold">Route Name <span class="text-muted fw-normal">(optional)</span></label>
                    <input type="text" name="route_name" class="form-control" placeholder="e.g. about">
                    <small class="text-muted">Active state detection এর জন্য। Laravel route name।</small>
                </div>
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">Icon <span class="text-muted fw-normal">(optional)</span></label>
                        <input type="text" name="icon" class="form-control" placeholder="bi-house">
                        <small class="text-muted">Bootstrap Icons class</small>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">Open In</label>
                        <select name="target" class="form-select">
                            <option value="_self">Same Tab</option>
                            <option value="_blank">New Tab</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-danger">Add Item</button>
            </div>
        </div>
        </form>
    </div>
</div>

{{-- Single delete form (outside main PUT form) --}}
<form id="deleteMenuForm" method="POST" style="display:none">
    @csrf
    @method('DELETE')
</form>

<script>
function deleteMenuItem(url) {
    if (!confirm('Delete this menu item?')) return;
    const form = document.getElementById('deleteMenuForm');
    form.action = url;
    form.submit();
}

// Pre-select location in modal based on active tab
document.querySelectorAll('[data-bs-toggle="tab"]').forEach(tab => {
    tab.addEventListener('shown.bs.tab', e => {
        const map = { 'tab-header': 'header', 'tab-footer-quick': 'footer_quick', 'tab-footer-customer': 'footer_customer' };
        const target = e.target.getAttribute('href').replace('#', '');
        document.getElementById('addLocation').value = map[target] || 'header';
    });
});
</script>
@endsection