<?= $this->extend('Modules\Admin\Views\index'); ?>
<?= $this->section('content');?>
<div class="container-fluid">
<div class="row mb-md-3">
	<div class="col">
		<h4>Add Menu Item</h4>
		<!-- Breadcrumb !-->
		<nav aria-label="breadcrumb"><small>
			<ol class="breadcrumb mb-0">
				<li class="breadcrumb-item"><a href="<?= base_url('administrator') ?> ">Home</a></li>
                <li class="breadcrumb-item"><a href="<?= base_url('administrator/menu/groups') ?> ">Menu Groups</a></li>
				<li class="breadcrumb-item active" aria-current="page"><?= esc($bcrumb) ?> </li>
			</ol></small>
		</nav>
		<!-- End Breadcrumb !-->
	</div>
</div>
<!-- Notification messages !-->
<div class="row">
    <div class="col">
		<!-- print success message !-->
		<?php if(session()->getTempdata('success')): ?>
			<div class="alert alert-success" role="alert"><?= session()->getTempdata('success');?></div>
		<?php endif;?>
		<!-- print failure message !-->
		<?php if(session()->getTempdata('error')): ?>
			<div class="alert alert-danger" role="alert"><?= session()->getTempdata('error');?></div>
		<?php endif;?>
        <div id="showMsg"></div>
</div></div>
    <!-- Pages Detailed List !-->
    <div class="card card-body">
        <div class="mb-2"><h5>&nbsp; <span class="float-end"><a href="<?= base_url('administrator/menu/groups'); ?>" class="btn btn-sm btn-dark rounded-0 float-sm-end">Back to Groups</a></span></h5></div>
        <div class="alert alert-success">
        <strong>Create Menu</strong>:  
<small>With LT CMS, you have the flexibility to easily create menus based on your preferred menu type [By <strong>Page</strong> | <strong>Post Category</strong> | <strong>Single Post</strong>]. Simply define the desired category for each menu to ensure proper categorization. Incase you did not create a category, start from here <a href="<?= base_url('administrator/menu/groups'); ?>">Create Category</a></small>
        </div>
        <?= form_open('administrator/menu/item/add'); ?>
        <div class="row g-md-5">
            <div class="col-lg-6 col-md-7">
                <div class="mb-3">
                    <label class="form-label fw-bold" for="name">Name *</label>
                    <input type="text" class="form-control " name="title" placeholder="Add Menu Name" required/>
                </div><!-- Menu name !-->
				<div class="mb-3">
                    <label class="form-label fw-bold" for="menuType">Menu Type</label>
                    <select class="form-select" name="menu_type" id="menuType" required>
						<option value="">Select Menu Type</option>
						<option value="page">Page</option>
						<option value="category">Category</option>
						<option value="post">Post</option>
                        <option value="custom">Custom</option>
					</select>
                </div><!-- Menu Type to help you pick right content !-->
				<p class="text-muted w-75"><small>In this section we display the different user options basing on the selected menu type</small></p>

				<div id="pageOptions">
					<div class="mb-3">
						<label class="form-label" for="pageid"><strong>Choose page to connect to Menu</strong> </label>
						<select name="page_id" class="form-select form-select-lg " id="pageid" >
							<option value="">Choose page here</option>
							<?php foreach($getPages as $page):?>
								<option value="<?= $page->id; ?>"><?= $page->title; ?></option>
							<?php endforeach; ?>
                        </select>
					</div>
				</div><!-- Single Page  !-->
				<div id="categoryOptions">
				<div class="mb-3">
                    <?php function generateSelectOptions($categories, $indent = '') { ?>
                        <?php foreach ($categories as $category) { ?>
                            <option value="<?= $category['id'] ?>"><?= $indent . $category['name'] ?></option>
                            <?php if (isset($category['subcategories']) && is_array($category['subcategories'])) { ?>
                                <?php generateSelectOptions($category['subcategories'], $indent . '- '); ?>
                            <?php } ?>
                        <?php } ?>
                    <?php } ?>
                    <label class="form-label"><strong>Select Posts Category for the Menu</strong></label>
                    <select name="post_category" class="form-select form-select-lg">
                        <option value="">Select Category</option>
                        <?php generateSelectOptions($categoryTree); ?>
                    </select>
                </div>
				</div><!-- Post Category  !-->
				<div id="postOptions">
					<div class="mb-3">
						<label class="form-label" for="catid"><strong>Select Single Post for the menu</strong></label>
						<select name="post_id" class="form-select form-select-lg" id="catid">
							<option value="">Choose Post here</option>
							<?php foreach($getPosts as $p):?>
								<option value="<?= $p->id; ?>"><?= $p->title; ?></option>
							<?php endforeach; ?>
                        </select>
					</div>
				</div><!-- Single Post   !-->
                <div id="customOptions">
					<div class="mb-3">
						<label class="form-label" for="customlink"><strong>Enter link to your favourite website</strong></label>
						<input type="text" name="custom" class="form-control form-control-lg" id="customlink" placeholder="Enter full website link here">
					</div>
				</div><!-- Single Post   !-->

            </div><!-- Left Col !-->
            <div class="col-lg-4 col-md-5 ">
				<div class="mb-3">
                    <label class="form-label fw-bold">Menu Category</label>
                    <select class="form-select" name="category_id" required>
						<option value="">Select Menu Category</option>
						<?php foreach($menuGroups as $group):?>
						<option value="<?= $group->id ?>"><?= $group->name ?></option>
						<?php endforeach; ?>
					</select>
                </div><!-- Menu Categories or Menu Groups !-->
				<div class="mb-3">
                    <label class="form-label fw-bold">Parent Menu Item</label>
                    <select class="form-select" name="parent_id" >
						<option value="">Select Parent </option>
						<?php foreach($menus as $m):?>
						<option value="<?= $m->id ?>"><?= $m->title; ?></option>
						<?php endforeach; ?>
					</select>
                </div><!-- Parent Item !-->
				<div class="mb-3">
                    <label class="form-label fw-bold">Level</label>
                    <select class="form-select" name="level" >
						<option value="1">Level 1</option>
						<option value="2">Level 2</option>
						<option value="3">level 3</option>
						<option value="4">level 4</option>
					</select>
                </div><!-- Menu Level !-->
				<div class="mb-3">
                    <label class="form-label"><strong>Status</strong></label>
                    <select name="status" class="form-select bg-success bg-opacity-75 text-white" >
                        <option value="published" >Published</option>
                        <option value="unpublished">Unpublished</option>
                        <option value="archived">Archived</option>
                        <option value="trashed">Trashed</option>
                    </select>
                  </div>
                  <div class="mb-3">
                    <label class="form-label"><strong>Access</strong></label>
                    <select name="access" class="form-select">
                        <option value="Public" >Public</option>
                        <option value="Private">Private</option>
                        <option value="Users">Users</option>
                    </select>
                  </div>
			</div>
			<div class="col-lg-2 col-md-2 col-sm-12 d-none d-lg-block">
				<div class="alert alert-primary">
					<h5>NOTE</h5>
					<p>To add a menu, you will need to ensure the Menu category is selected and proper menu type picked.<br/> Levels are also critically important in setup of the menu.</p>
				</div>
			</div><!-- notice !-->
        </div><!-- row !-->
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 mb-3">
                <label class="form-label fw-bold">Menu Link</label>
                <input type="text" class="form-control form-control-lg" name="link" placeholder="Automatically generated link" readonly/>
            </div><!-- Menu Link !-->
            <div class="col-lg-12 col-md-12 col-sm-12">
                <button type="reset" class="btn btn-lg btn-secondary">Reset</button>
                <button type="submit" class="btn btn-lg btn-danger">Add Menu Item</button>
            </div><!-- Buttons !--> 
        </div><!-- row !-->
        <?= form_close(); ?>
        
    </div>

</div><!-- Container !-->     

<!-- Modal !-->
 

<!---- JS --->  

<script>
    document.getElementById('catid').addEventListener('change', function () {
        var input = this;
        var selectedOption = document.querySelector('#posts option[value="' + input.value + '"]');
        if (selectedOption) {
            input.value = selectedOption.textContent;
        }
    });
</script>
<script>
        document.getElementById('menuType').addEventListener('change', function () {
            var selectedOption = this.value;
            document.getElementById('pageOptions').style.display = 'none';
            document.getElementById('categoryOptions').style.display = 'none';
            document.getElementById('postOptions').style.display = 'none';
            document.getElementById('customOptions').style.display = 'none';

            if (selectedOption === 'page') {
                document.getElementById('pageOptions').style.display = 'block';
            } else if (selectedOption === 'category') {
                document.getElementById('categoryOptions').style.display = 'block';
            } else if (selectedOption === 'post') {
                document.getElementById('postOptions').style.display = 'block';
            } else if (selectedOption === 'custom') {
                document.getElementById('customOptions').style.display = 'block';
            }
        });
    </script> 
<script src="<?= base_url();?>/assets/js/modules/admin-menu.js"></script>  
<?= $this->endSection();?>