{% extends "../../layouts/master.njk" %}

{% block csslib %}
	{# <link href='/cms-static/admin/assets/plugins/custom/datatables/datatables.bundle.css' rel='stylesheet' type='text/css'/> #}
	<link href='/cms-static/admin/custom/plugins/jstree/jstree.bundle.css' rel='stylesheet' type='text/css'/>
{% endblock %}

{% block jslib %}
	<script src="/cms-static/admin/custom/plugins/jstree/jstree.bundle.js"></script>
	<script src='/cms-static/common/js/custom-functions.js'></script>
	<!-- Form Submission Script-->
	<script src="/cms-static/common/js/form-data-json.min.js"></script>
	<script src="/cms-static/common/js/es-form.js"></script>
{% endblock %}

{% block customScript %}
	<script>
		$(".jstree_dragdrop").jstree({
			"core": {
				"themes": {
					"responsive": false
				},
				// so that create works
				"check_callback": true
			},
			"types": {
				"default": {
					"icon": "fa fa-folder text-success",
					"max_children": 10,
					"max_depth": 2
				},
				"file": {
					"icon": "fa fa-file  text-success"
				}
			},
			"state": {
				"key": "demo2"
			},
			"plugins": ["dnd", "state", "types"]
		});

		function saveMenuSorting(treeData, name) {
			const data = {
				'menu': treeData,
				name
			}
			axios
				.post('/admin/cms/menu/save', data)
				.then(async function (res) {
					location.reload()
				})
				.catch(function (error) {
					console.log(error);
				});
		}

		function deleteMenuItem(item) {
			const id = item.getAttribute('id')
			const nav_position = item.getAttribute('nav_position')
			const level = item.getAttribute('level')
			const obj = {
				id,
				nav_position,
				level
			}
			Swal
				.fire({
					text: 'Are you sure you want to delete ?',
					icon: 'warning',
					showCancelButton: !0,
					buttonsStyling: !1,
					confirmButtonText: 'Yes, delete!',
					cancelButtonText: 'No, cancel',
					customClass: {
						confirmButton: 'btn fw-bold btn-danger',
						cancelButton: 'btn fw-bold btn-active-light-primary'
					}
				})
				.then((e) => {
					if (e.value) {
						axios
							.post('/admin/cms/menu/delete', obj)
							.then((res) => {
								let data = res
									.data
									Swal
									.fire({
										text: data.message || 'You have deleted  !.',
										icon: 'success',
										buttonsStyling: !1,
										confirmButtonText: 'Ok',
										customClass: {
											confirmButton: 'btn fw-bold btn-primary'
										}
									})
									.then(() => {
										location.reload()
									})
							})
							.catch((error) => {
								let data = error
									?.response
										?.data
								if (data) {
									Swal.fire({
										text: data.error || 'Something went wrong !.',
										icon: 'warning',
										buttonsStyling: !1,
										confirmButtonText: 'Ok, got it!',
										customClass: {
											confirmButton: 'btn fw-bold btn-primary'
										}
									})
								}

							})
						}
				})
		}

		function editMenu(item) {
			let url = item.getAttribute('href')
			location.href = url
		}

		$(".jstree_dragdrop")
			.on("redraw.jstree", function (e, data) {
				//console.log(e.target.getAttribute("data-nav_position"))
				const targetId = e.target.id
				const menuName = e
					.target
					.getAttribute("data-nav_position")
				var v = $(`#${targetId}`)
					.jstree(true)
					.get_json('#', {flat: true})
				var redrawData = JSON.stringify(v);
				// console.log(redrawData)
				saveMenuSorting(redrawData, menuName)
			})
			.jstree();
	</script>
{% endblock %}

{% block content %}
	{% block title %}
		<title>Menu Management - {{browserTitle | upper()}} CMS</title>
	{% endblock %}
	
	<div class="d-flex flex-column flex-column-fluid">
		<div class="app-toolbar py-3 py-lg-6" id="beaver_app_toolbar">
			<div class="app-container container-xxl d-flex flex-stack" id="beaver_app_toolbar_container">
				<div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
					<h1 class="page-heading d-flex text-dark fw-bold fs-3 flex-column justify-content-center my-0">Menu Management</h1>
					<ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
						<li class="breadcrumb-item text-muted">
							<a class="text-muted text-hover-primary" href="{{LANDING_URL}}">Home</a>
						</li>
						<li class="breadcrumb-item">
							<span class="bullet bg-gray-400 w-5px h-2px"></span></li>
						<li class="breadcrumb-item text-muted">CMS</li>
						<li class="breadcrumb-item">
							<span class="bullet bg-gray-400 w-5px h-2px"></span></li>
						<li class="breadcrumb-item text-muted">Menu</li>
					</ul>
				</div>
				<div class="d-flex align-items-center gap-2 gap-lg-3">
					<a class="btn btn-sm fw-bold btn-primary" href="#" data-bs-toggle="modal" data-bs-target="#beaver_modal_create_section">Add Nav Section</a>
				</div>
			</div>
		</div>
		<div id="beaver_app_content" class="app-content flex-column-fluid">
			<div id="beaver_app_content_container" class="app-container container">
				<div class="row g-5">
					{% for nav in menulist %}
						<div class="col-lg-6">
							<div class="card card-stretch card-bordered mb-5">
								<div class="card-header">
									<h3 class="card-title">{{ nav.nav_label }}</h3>
									<div class="card-toolbar">
										<a class="btn btn-sm btn-icon btn-light-danger menu-link px-3" id="{{ nav._id }}" url="/admin/cms/menu/delete-position" data-beaver-subscriptions-table-filter="delete_row" onClick="deleteItem(this)">
											<i class="fa fa-trash"></i>
										</a>
										<a class="btn btn-sm btn-icon mx-1 fw-bold btn-light-primary" href="#" data-bs-toggle="modal" data-sectionId="{{nav._id}}" data-bs-target="#beaver_modal_create_item">
											<i class="fa fa-plus"></i>
										</a>
									</div>
								</div>
								<div class="card-body">
									<div class="jstree_dragdrop" id="nav_{{ nav._id }}" data-nav_position="{{ nav.nav_position }}">
										<ul>
											{% for menu in nav.nav_items %}
												<li data_id="{{ menu._id }}" url="{{ menu.url | json }}" label="{{ menu.label | json }}" active="{{ menu.active }}" external="{{ menu.external }}" >{{ menu.label.en }}
													<span class="" id="{{ menu._id }}" nav_position="{{ nav.nav_position }}" level="0" onClick="deleteMenuItem(this)">
														<i class="fa-solid fa-trash text-danger"></i>
													</span>
													{# <span class="btn btn-sm mx-1 btn-primary" id="{{ menu._id }}" nav_position="{{ nav.nav_position }}" level="0" href="/admin/cms/menu/{{ nav.nav_position }}/edit/{{ loop.index-1 }}/0" onClick="editMenu(this)"> #}
													<span class="mx-1" id="{{ menu._id }}" nav_position="{{ nav.nav_position }}" level="0" href="/admin/cms/menu/{{ nav.nav_position }}/edit/{{ loop.index-1 }}/0" onClick="editMenu(this)">
														<i class="fa-solid fa-pen text-primary"></i>
													</span>
													<ul>
														{%set parent_index = loop.index0%}
														{% for first_level_child in menu.child %}
															<li data_id="{{ first_level_child._id }}" url="{{ first_level_child.url | json }}" label="{{ first_level_child.label | json }}" active="{{ first_level_child.active }}" external="{{ first_level_child.external }}" >
																{{ first_level_child.label.en }}
																{# <button class="btn btn-sm mx-1 btn-danger" id="{{ first_level_child._id }}" nav_position="{{ nav.nav_position }}" level="1" onClick="deleteMenuItem(this)">
																	<i class="fa-solid fa-trash"></i>
																</button>
																<button class="btn btn-sm btn-primary" id="{{ menu._id }}" nav_position="{{ nav.nav_position }}" level="0" href="/admin/cms/menu/{{ nav.nav_position }}/edit/{{ loop.index-1 }}/1?parent_index={{parent_index}}" onClick="editMenu(this)">
																	<i class="fa-solid fa-pen"></i>
																</button> #}
																<span class="mx-1" id="{{ first_level_child._id }}" nav_position="{{ nav.nav_position }}" level="1" onClick="deleteMenuItem(this)">
																	<i class="fa-solid fa-trash text-danger"></i>
																</span>
																<span class="mx-1" id="{{ menu._id }}" nav_position="{{ nav.nav_position }}" level="0" href="/admin/cms/menu/{{ nav.nav_position }}/edit/{{ loop.index-1 }}/1?parent_index={{parent_index}}" onClick="editMenu(this)">
																	<i class="fa-solid fa-pen text-primary"></i>
																</span>

																<ul>
																	{%set sec_parent_index = loop.index0%}
																	{% for second_level_child in first_level_child.child %}
																		<li data_id="{{ second_level_child._id }}" url="{{ second_level_child.url | json }}" label="{{ second_level_child.label | json }}" active="{{ second_level_child.active }}" external="{{ second_level_child.external }}" >
																			{{ second_level_child.label.en }}
																			{# <button class="btn btn-sm mx-1 btn-danger" id="{{ second_level_child._id }}" nav_position="{{ nav.nav_position }}" level="2" onClick="deleteMenuItem(this)">
																				<i class="fa-solid fa-trash"></i>
																			</button>
																			<button class="btn btn-sm mx-1 btn-primary" id="{{ menu._id }}" nav_position="{{ nav.nav_position }}" level="0" href="/admin/cms/menu/{{ nav.nav_position }}/edit/{{ loop.index-1 }}/2?parent_index={{parent_index}}&sec_parent_index={{sec_parent_index}}" onClick="editMenu(this)">
																				<i class="fa-solid fa-pen"></i>
																			</button> #}
																			<span class="mx-1" id="{{ second_level_child._id }}" nav_position="{{ nav.nav_position }}" level="2" onClick="deleteMenuItem(this)">
																				<i class="fa-solid fa-trash text-danger"></i>
																			</span>
																			<span class="mx-1" id="{{ menu._id }}" nav_position="{{ nav.nav_position }}" level="0" href="/admin/cms/menu/{{ nav.nav_position }}/edit/{{ loop.index-1 }}/2?parent_index={{parent_index}}&sec_parent_index={{sec_parent_index}}" onClick="editMenu(this)">
																				<i class="fa-solid fa-pen text-primary"></i>
																			</span>
																		</li>
																	{% endfor %}
																</ul>
															</li>
														{% endfor %}
													</ul>
												</li>
											{% endfor %}
										</ul>
									</div>
								</div>
							</div>
						</div>
					{% endfor %}
				</div>
			</div>
		</div>

		<div class="modal fade" id="beaver_modal_create_section" tabindex="-1" aria-hidden="true">
			<div class="modal-dialog modal-dialog-centered">
				<div class="modal-content">
					<div class="modal-header">
						<h2>Add Nav Section</h2>
						<div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
							<h3>X</h3>
						</div>
					</div>
					<div class="modal-body">
						<form class="form es-form" id="beaver_modal_create_section_form" action="/admin/cms/menu/section/add" data-redirect-url="/admin/cms/menu" method="post">
							<div class="card card-flush">
								<div class="card-body pt-0">
									<div class="col">
										<input type="text" class="form-control mb-2" name="menu_position" placeholder="New Menu Position" value="">
										<div class="fv-plugins-message-container invalid-feedback" id="field-error-menu_position"></div>
									</div>
									<div class="card-toolbar mt-8 d-flex justify-content-end">
										<button class="btn btn-sm btn-success form-submit-btn" type="submit">
											<span class="label">Save</span>
											<span class="preloader d-none">Saving...</span>
										</button>
									</div>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>

		<div class="modal fade" id="beaver_modal_create_item" tabindex="-1" aria-hidden="true">
			<div class="modal-dialog modal-dialog-centered">
				<div class="modal-content">
					<div class="modal-header">
						<h2>Add Menu</h2>
						<div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
							<h3>X</h3>
						</div>
					</div>
					<div class="modal-body">
						<form class="form es-form" id="beaver_modal_create_item_form" action="/admin/cms/menu/add" data-redirect-url="/admin/cms/menu" method="post">
							<input type="hidden" name="menu_position" id="nav-id" value="">
							<div class="card card-flush">
								<div class="card-body pt-0">
									<div class="col">
										<ul class="nav nav-tabs nav-line-tabs mb-5 fs-6">
											{% for brandLanguage in authUser.brand.languages %}
												<li class="nav-item">
													<a class="nav-link {{ 'active' if loop.index == 1 }}" data-bs-toggle="tab" href="#beaver_tab_pane_{{ brandLanguage.prefix }}">{{ brandLanguage.name }}</a>
												</li>
											{% endfor %}
										</ul>
									</div>

									<div class="tab-content tab-content-fields" id="myTabContent">
										{% for brandLanguage in authUser.brand.languages %}
											<div class="tab-pane fade {% if loop.index == 1 %}active show{% endif %}" role="tabpanel" id="beaver_tab_pane_{{ brandLanguage.prefix }}">
												<div class="d-flex flex-column fv-row fv-plugins-icon-container col-12">
													<label class="d-flex align-items-center fs-6 fw-semibold mb-2">
														<span class="required"> Menu name ({{ brandLanguage.prefix }}) </span>
														{# <i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip" aria-label="label" data-beaver-initialized="1"></i> #}
													</label>
													<input type="text" class="form-control mb-2" name="label[{{ brandLanguage.prefix }}]" placeholder="Menu label" value="">
													<div class="fv-plugins-message-container invalid-feedback" id="field-error-label_{{ brandLanguage.prefix }}"></div>
												</div>
												<div class="col-12">
													<label class="d-flex align-items-center fs-6 fw-semibold mb-2">
														<span class="required"> Path ({{ brandLanguage.prefix }}) </span>
														{# <i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip" aria-label="path" data-beaver-initialized="1"></i> #}
													</label>
													<input type="text" class="form-control mb-2" name="path[{{ brandLanguage.prefix }}]" placeholder="Menu path url" value="">
													<div class="fv-plugins-message-container invalid-feedback" id="field-error-path_{{ brandLanguage.prefix }}"></div>
												</div>
											</div>
										{% endfor %}
									</div>
									<div class="col-12">
										<label class="d-flex align-items-center fs-6 fw-semibold mb-2">
											<span>Active</span>
											{# <i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip" aria-label="path" data-beaver-initialized="1"></i> #}
										</label>
										<div class="form-check form-check-custom form-check-solid mb-2">
											<input id="flexCheckChecked" class="form-check-input" type="checkbox" name="active" value="true" checked/>
											<label class="form-check-label" for="flexCheckChecked">Active</label>
										</div>
										<label class="d-flex align-items-center fs-6 fw-semibold mb-2">
											<span>Link Type</span>
											{# <i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip" aria-label="path" data-beaver-initialized="1"></i> #}
										</label>
										<div class="form-check form-check-custom form-check-solid">
											<input id="flexCheckChecked" class="form-check-input" type="checkbox" name="external" value="true"/>
											<label class="form-check-label" for="flexCheckChecked">External</label>
										</div>

										<div class="card-toolbar mt-8 d-flex justify-content-end">
											<button class="btn btn-sm btn-success form-submit-btn" type="submit">
												<span class="label">Save</span>
												<span class="preloader d-none">Saving...</span>
											</button>
										</div>
									</div>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>

	</div>

{% endblock %}