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

@push('styles')
<style>
.menu-row { transition: background .15s; }
.menu-row:hover { background: #f9fafb; }
.menu-row td { vertical-align: middle; }
.edit-form { display: none; background: #f0f4ff; }
.edit-form td { padding: 10px 12px !important; }
.sort-handle { cursor: grab; color: #9ca3af; font-size: 1.1rem; }
.sort-handle:active { cursor: grabbing; }
.badge-active   { background:#d1fae5; color:#065f46; font-size:.7rem; padding:3px 8px; border-radius:999px; }
.badge-inactive { background:#fee2e2; color:#991b1b; font-size:.7rem; padding:3px 8px; border-radius:999px; }
</style>
@endpush

@section('content')
<div class="d-flex align-items-center justify-content-between mb-3">
    <h5 class="mb-0"><i class="bi bi-list-ul me-2"></i>Menu Management</h5>
</div>

{{-- Add new item --}}
<div class="card mb-4">
    <div class="card-header py-3 px-4"><i class="bi bi-plus-circle me-2"></i>নতুন মেনু আইটেম যোগ করুন</div>
    <div class="card-body p-4">
        <form method="POST" action="{{ route('admin.menu.store') }}">
            @csrf
            <div class="row g-3 align-items-end">
                <div class="col-md-4">
                    <label class="form-label fw-semibold">মেনু নাম</label>
                    <input type="text" name="label" class="form-control" placeholder="যেমন: হোম, যোগাযোগ" required>
                </div>
                <div class="col-md-4">
                    <label class="form-label fw-semibold">লিংক (URL)</label>
                    <input type="text" name="url" class="form-control" placeholder="/ অথবা https://..." required>
                </div>
                <div class="col-md-2">
                    <label class="form-label fw-semibold">নতুন ট্যাবে?</label>
                    <select name="target" class="form-select">
                        <option value="_self">না (একই ট্যাব)</option>
                        <option value="_blank">হ্যাঁ (নতুন ট্যাব)</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <button class="btn btn-primary w-100"><i class="bi bi-plus me-1"></i>যোগ করুন</button>
                </div>
            </div>
        </form>
    </div>
</div>

{{-- Menu items list --}}
<div class="card">
    <div class="card-header py-3 px-4 d-flex align-items-center justify-content-between">
        <span><i class="bi bi-menu-button-wide me-2"></i>বর্তমান মেনু ({{ $items->count() }}টি আইটেম)</span>
        <small class="text-muted">টেনে ধরে ক্রম পরিবর্তন করুন</small>
    </div>
    <div class="card-body p-0">
        @if($items->isEmpty())
            <div class="text-center py-5 text-muted">
                <i class="bi bi-list-ul" style="font-size:2rem;opacity:.3"></i>
                <p class="mt-2 mb-0">কোনো মেনু আইটেম নেই। উপরে যোগ করুন।</p>
            </div>
        @else
        <table class="table mb-0" id="menuTable">
            <thead>
                <tr>
                    <th style="width:36px"></th>
                    <th>মেনু নাম</th>
                    <th>URL</th>
                    <th>ট্যাব</th>
                    <th>অবস্থা</th>
                    <th style="width:140px">অ্যাকশন</th>
                </tr>
            </thead>
            <tbody id="menuBody">
                @foreach($items as $item)
                <tr class="menu-row" data-id="{{ $item->id }}">
                    <td><span class="sort-handle"><i class="bi bi-grip-vertical"></i></span></td>
                    <td><strong>{{ $item->label }}</strong></td>
                    <td><code style="font-size:.78rem">{{ $item->url }}</code></td>
                    <td>{{ $item->target === '_blank' ? 'নতুন ট্যাব' : 'একই ট্যাব' }}</td>
                    <td>
                        <span class="{{ $item->is_active ? 'badge-active' : 'badge-inactive' }}">
                            {{ $item->is_active ? 'সক্রিয়' : 'নিষ্ক্রিয়' }}
                        </span>
                    </td>
                    <td>
                        <button class="btn btn-sm btn-outline-primary me-1" onclick="toggleEdit({{ $item->id }})">
                            <i class="bi bi-pencil"></i>
                        </button>
                        <form method="POST" action="{{ route('admin.menu.destroy', $item) }}" class="d-inline"
                              onsubmit="return confirm('এই আইটেমটি মুছে ফেলবেন?')">
                            @csrf @method('DELETE')
                            <button class="btn btn-sm btn-outline-danger"><i class="bi bi-trash"></i></button>
                        </form>
                    </td>
                </tr>
                <tr class="edit-form" id="edit-{{ $item->id }}">
                    <td colspan="6">
                        <form method="POST" action="{{ route('admin.menu.update', $item) }}">
                            @csrf @method('PUT')
                            <div class="row g-2 align-items-end">
                                <div class="col-md-3">
                                    <label class="form-label fw-semibold mb-1" style="font-size:.8rem">মেনু নাম</label>
                                    <input type="text" name="label" class="form-control form-control-sm"
                                           value="{{ $item->label }}" required>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label fw-semibold mb-1" style="font-size:.8rem">URL</label>
                                    <input type="text" name="url" class="form-control form-control-sm"
                                           value="{{ $item->url }}" required>
                                </div>
                                <div class="col-md-2">
                                    <label class="form-label fw-semibold mb-1" style="font-size:.8rem">ট্যাব</label>
                                    <select name="target" class="form-select form-select-sm">
                                        <option value="_self" {{ $item->target === '_self' ? 'selected' : '' }}>একই ট্যাব</option>
                                        <option value="_blank" {{ $item->target === '_blank' ? 'selected' : '' }}>নতুন ট্যাব</option>
                                    </select>
                                </div>
                                <div class="col-md-1">
                                    <label class="form-label fw-semibold mb-1" style="font-size:.8rem">সক্রিয়</label>
                                    <div class="form-check mt-1">
                                        <input class="form-check-input" type="checkbox" name="is_active"
                                               value="1" {{ $item->is_active ? 'checked' : '' }}>
                                    </div>
                                </div>
                                <div class="col-md-2 d-flex gap-2">
                                    <button class="btn btn-sm btn-success"><i class="bi bi-check me-1"></i>সেভ</button>
                                    <button type="button" class="btn btn-sm btn-secondary"
                                            onclick="toggleEdit({{ $item->id }})">বাতিল</button>
                                </div>
                            </div>
                        </form>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
        @endif
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.2/Sortable.min.js"></script>
<script>
function toggleEdit(id) {
    var row = document.getElementById('edit-' + id);
    row.style.display = (row.style.display === 'table-row') ? 'none' : 'table-row';
}

var sortable = Sortable.create(document.getElementById('menuBody'), {
    handle: '.sort-handle',
    animation: 150,
    onEnd: function () {
        var order = Array.from(document.querySelectorAll('#menuBody tr.menu-row'))
                        .map(function(r) { return r.dataset.id; });
        fetch('{{ route("admin.menu.reorder") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({ order: order })
        });
    }
});
</script>
@endpush