<?php $__env->startSection('title', 'Menu Management'); ?>

<?php $__env->startPush('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>
<?php $__env->stopPush(); ?>

<?php $__env->startSection('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>


<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="<?php echo e(route('admin.menu.store')); ?>">
            <?php echo csrf_field(); ?>
            <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>


<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>বর্তমান মেনু (<?php echo e($items->count()); ?>টি আইটেম)</span>
        <small class="text-muted">টেনে ধরে ক্রম পরিবর্তন করুন</small>
    </div>
    <div class="card-body p-0">
        <?php 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>
        <?php 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">
                <?php $__currentLoopData = $items; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <tr class="menu-row" data-id="<?php echo e($item->id); ?>">
                    <td><span class="sort-handle"><i class="bi bi-grip-vertical"></i></span></td>
                    <td><strong><?php echo e($item->label); ?></strong></td>
                    <td><code style="font-size:.78rem"><?php echo e($item->url); ?></code></td>
                    <td><?php echo e($item->target === '_blank' ? 'নতুন ট্যাব' : 'একই ট্যাব'); ?></td>
                    <td>
                        <span class="<?php echo e($item->is_active ? 'badge-active' : 'badge-inactive'); ?>">
                            <?php echo e($item->is_active ? 'সক্রিয়' : 'নিষ্ক্রিয়'); ?>

                        </span>
                    </td>
                    <td>
                        <button class="btn btn-sm btn-outline-primary me-1" onclick="toggleEdit(<?php echo e($item->id); ?>)">
                            <i class="bi bi-pencil"></i>
                        </button>
                        <form method="POST" action="<?php echo e(route('admin.menu.destroy', $item)); ?>" class="d-inline"
                              onsubmit="return confirm('এই আইটেমটি মুছে ফেলবেন?')">
                            <?php echo csrf_field(); ?> <?php echo method_field('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-<?php echo e($item->id); ?>">
                    <td colspan="6">
                        <form method="POST" action="<?php echo e(route('admin.menu.update', $item)); ?>">
                            <?php echo csrf_field(); ?> <?php echo method_field('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="<?php echo e($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="<?php echo e($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" <?php echo e($item->target === '_self' ? 'selected' : ''); ?>>একই ট্যাব</option>
                                        <option value="_blank" <?php echo e($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" <?php echo e($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(<?php echo e($item->id); ?>)">বাতিল</button>
                                </div>
                            </div>
                        </form>
                    </td>
                </tr>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </tbody>
        </table>
        <?php endif; ?>
    </div>
</div>
<?php $__env->stopSection(); ?>

<?php $__env->startPush('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('<?php echo e(route("admin.menu.reorder")); ?>', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '<?php echo e(csrf_token()); ?>'
            },
            body: JSON.stringify({ order: order })
        });
    }
});
</script>
<?php $__env->stopPush(); ?>

<?php echo $__env->make('layouts.admin', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH C:\xampp\htdocs\epaper\resources\views/admin/menu/index.blade.php ENDPATH**/ ?>