<?= view('common/top_header_backdesk.php') ?>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" />
<style>
    .form-control, select.form-control {
        outline: 1px solid #67676b;
        border-radius: 5px;
        padding: 8px 10px;
    }
    .error {
        color: red;
        padding-top: 10px;
    }
</style>
</head>

<body>
<div class="container-scroller">
    <?= view('common/top_navbar') ?>
    <div class="container-fluid page-body-wrapper">
        <?= view('common/side_navbar') ?>
        <div class="main-panel">
            <div class="content-wrapper">
                <div class="card">
                    <form id="menu_edit_form" method="post" class="card-body">
                        <h4 class="card-title">Edit Menu <hr></h4>

                        <!-- Parent Menu Dropdown -->
                        <div class="row">
                            <div class="col-md-6">
                                <label class="font-weight-bold">Parent Menu (optional)</label>
                                <select name="parent_id" class="form-control select2">
                                    <option value="0">-- Main Menu --</option>
                                    <?php foreach ($menu_list as $m): ?>
                                        <?php if ($m['id'] != $menu['id']): ?>
                                            <option value="<?= $m['id'] ?>" <?= ($menu['parent_id'] == $m['id']) ? 'selected' : '' ?>>
                                                <?= esc($m['name']) ?>
                                            </option>
                                        <?php endif; ?>
                                    <?php endforeach; ?>
                                </select>
                            </div>
                        </div>

                        <!-- Menu Name -->
                        <div class="row mt-3">
                            <div class="col-md-6">
                                <label class="font-weight-bold">Menu Name <span class="text-danger">*</span></label>
                                <input type="text" name="name" class="form-control" value="<?= esc($menu['name']) ?>" required />
                            </div>
                        </div>

                        <!-- Template -->
                        <div class="row mt-3">
                            <div class="col-md-6">
                                <label class="font-weight-bold">Template <span class="text-danger">*</span></label>
                              
                                    <select class="form-control" name="template" id="template">
                                        <option value=""></option>
                                        <option value="Template 1" <?= ($menu['template'] == "Template 1") ? 'selected' : '' ?>>Template 1 (With Right Section)</option>
                                        <option value="Template 2" <?= ($menu['template'] == "Template 2") ? 'selected' : '' ?>>Template 2 (Without Right Section)</option>
                                        <!-- <option value="Template 3" <?= ($menu['template'] == "Template 3") ? 'selected' : '' ?>>Template 3</option>
                                        <option value="Template 4" <?= ($menu['template'] == "Template 4") ? 'selected' : '' ?>>Template 4</option> -->
                                    </select>
                                 
                            </div>
                        </div>

                        <!-- Hidden ID -->
                        <input type="hidden" name="id" value="<?= esc($menu['id']) ?>">

                        <!-- Submit -->
                        <div class="row mt-4">
                            <div class="col-md-12">
                                <button type="submit" class="btn btn-success btn-sm">
                                    <i class="mdi mdi-content-save"></i> Update Menu
                                </button>
                                <a href="<?= base_url('backdesk/menu/index') ?>" class="btn btn-secondary btn-sm">Cancel</a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <footer class="footer">
                <div class="d-sm-flex justify-content-center justify-content-sm-between">
                    <span class="text-muted d-block d-sm-inline-block">© <?= date('Y') . ' ' . COMPANY_FULL_NAME ?></span>
                    <span class="float-none float-sm-right mt-1 mt-sm-0 d-block text-center">
                        With ❤️ from <a href="<?= CREDIT_LINK ?>" target="_blank"><?= CREDIT_TITLE ?></a>
                    </span>
                </div>
            </footer>
        </div>
    </div>
</div>

<?= view('common/footer_backdesk.php') ?>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<script>
$(document).ready(function () {
    $('.select2').select2();

    $('#menu_edit_form').on('submit', function (e) {
        e.preventDefault();

        const jwtToken = localStorage.getItem('jwt_token');
        const csrfTokenName = '<?= csrf_token() ?>';
        const csrfTokenValue = '<?= csrf_hash() ?>';

        const formData = new FormData(this);
        formData.append(csrfTokenName, csrfTokenValue);

        $.ajax({
            url: '<?= base_url('api/menu/update-menu') ?>',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            headers: {
                'Authorization': 'Bearer ' + jwtToken
            },
            success: function (response) {
                if (response.status === 200 || response.status === true) {
                    toast('success', response.message || 'Menu updated successfully');
                    setTimeout(() => {
                        window.location.href = '<?= base_url('backdesk/menu/index') ?>';
                    }, 1200);
                } else {
                    toast('danger', response.message || 'Something went wrong');
                }
            },
            error: function (xhr) {
                toast('danger', 'Failed to update menu');
            }
        });
    });
});
</script>
</body>
</html>
