<?= 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_add_form" method="post" class="card-body">
                        <h4 class="card-title">Add 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" id="parent_id" class="form-control select2">
                                    <option value="0">-- Main Menu --</option>
                                    <?php foreach ($menus as $menu): ?>
                                        <option value="<?= esc($menu['id']) ?>"><?= esc($menu['name']) ?></option>
                                    <?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" id="name" class="form-control" required />
                            </div>
                        </div>

                        <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">Template 1 (With Right Section)</option>
                                    <option value="Template 2">Template 2 (Without Right Section)</option>
                                    <!-- <option value="Template 3">Template 3</option>
                                    <option value="Template 4">Template 4</option> -->
                                </select>
                            </div>
                        </div>

                        <!-- 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> Save 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_add_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/add-menu') ?>', // your API endpoint
            method: 'POST',
            headers: {
                'Authorization': 'Bearer ' + jwtToken
            },
            data: formData,
            contentType: false,
            processData: false,
            success: function (response) {
                if (response.status === 200 || response.status === true) {
                    toast('success', response.message || 'Menu added successfully');
                    setTimeout(() => {
                        window.location.href = '<?= base_url('backdesk/menu/index') ?>';
                    }, 1000);
                } else {
                    toast('danger', response.message || 'Something went wrong');
                }
            },
            error: function (xhr) {
                console.error(xhr);
                toast('danger', 'Failed to create menu');
            }
        });
    });
});
</script>
</body>
</html>
