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

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

{% block jslib %}
	{# //- // begin::Vendors Javascript(used by this page) #}
	<script src='/cms-static/admin/assets/plugins/custom/datatables/datatables.bundle.js'></script>
	{# //- // end::Vendors Javascript #}
	<script src='/cms-static/admin/assets/plugins/custom/formrepeater/formrepeater.bundle.js'></script>
	{# //- // end::Custom Javascript #}

	<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>
		$('#beaver_docs_repeater_nested').repeater({
			repeaters: [
				{
					selector: '.inner-repeater',
					show: function () {
						$(this).slideDown();
					},

					hide: function (deleteElement) {
						$(this).slideUp(deleteElement);
					}
				}
			],

			show: function () {
				$(this).slideDown();
				// Re-init select2
				$(this)
					.find('[data-beaver-repeate="select2"]')
					.select2();
			},

			hide: function (deleteElement) {
				$(this).slideUp(deleteElement);
			},
			ready: function () {
				// Init select2
				$('[data-beaver-repeate="select2"]').select2();
			}
		});

		document.addEventListener('DOMContentLoaded', function () {
			let selectedIcon = ''
			document
				.querySelectorAll('.svg-item')
				.forEach(function (svgIcon) {
					svgIcon.addEventListener('click', function (e) {
						e.preventDefault()

						selectedIcon = svgIcon
							.querySelector('a')
							.innerHTML

							document
							.querySelectorAll('.svg-item')
							.forEach(function (activeItem) {
								activeItem
									.querySelector('a')
									.classList
									.remove('btn-success')
							})

						svgIcon
							.querySelector('a')
							.classList
							.add('btn-success')
					})
				})

			document
				.querySelector('#icon-list-modal')
				.querySelector('#add-icon-modal-btn')
				.addEventListener('click', function () {
					document
						.getElementById('admin-svg-icon-form-field')
						.value = selectedIcon
					document
						.getElementById('svg-icon-preview')
						.innerHTML = selectedIcon
				})
		})
	</script>

{% endblock %}

{% block content %}
	{% block title %}
		<title>{{ 'Edit' if contentType else 'Add' }} Content Type - {{browserTitle | upper()}} CMS</title>
	{% endblock %}

	<div class="d-flex flex-column flex-column-fluid">
		<div id="beaver_app_toolbar" class="app-toolbar py-3 py-lg-6">
			<div id="beaver_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
				<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">
						{{ 'Edit' if contentType else 'Add' }} Content Type
				</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}}">Dashboard</a>
						</li>
						<li class="breadcrumb-item">
							<span class="bullet bg-gray-400 w-5px h-2px"></span>
						</li>
						<li class="breadcrumb-item text-muted">Content Type 
						<span class="bullet bg-gray-400 w-5px h-2px ms-1"></span>
						</li>
						<li class="breadcrumb-item text-muted">{{ 'Edit' if contentType else 'New' }}</li>
					</ul>
				</div>
			</div>
		</div>
		<form id="beaver_account_profile_details_form" class="form es-form" action="/admin/config/content-type/save" data-redirect-url="/admin/config/content-type" method="post" autocomplete="off">
			<div id="beaver_app_content" class="app-content flex-column-fluid">
				<div id="beaver_app_content_container" class="app-container container-xxl">

					<div class="card mb-5 mb-xl-10">
						<div class="card-header border-0 cursor-pointer" role="button" data-bs-toggle="collapse" data-bs-target="#beaver_account_profile_details" aria-expanded="true" aria-controls="beaver_account_profile_details">
							<div class="card-title m-0">
								<h3 class="fw-bold m-0">Content Type Form</h3>
							</div>
						</div>
						<div id="beaver_account_settings_profile_details">
							<input type="hidden" name="id" value="{{ contentType._id }}">
							<div class="card-body border-top p-9">
								<div class="row mb-6">
									<label class="col-lg-4 col-form-label required fw-semibold fs-6">Brand</label>
									<div class="col-lg-8">
										<div class="row">
											<div class="col-lg-12 fv-row">
												<select class="form-select form-select-lg form-select-solid" data-control="select2" data-close-on-select="false" name="brand" data-placeholder="Select Brand" multiple="multiple">
													<option value="">Select Brand</option>
													{% for brand in brands %}
														<option value="{{ brand.id }}" {{'selected' if contentType.brand and brand.id in contentType.brand }}>{{ brand.name.en }}</option>
													{% endfor %}
												</select>
												<div class="fv-plugins-message-container invalid-feedback" id="field-error-brand"></div>
											</div>
										</div>
									</div>
								</div>
								<div class="row mb-6">
									<label class="col-lg-4 col-form-label required fw-semibold fs-6">Title</label>
									<div class="col-lg-8">
										<div class="row">
											<div class="col-lg-12 fv-row">
												<input class="form-control form-control-lg form-control-solid mb-3 mb-lg-0" type="text" name="title" placeholder="Title" value="{{ contentType.title }}">
												<div class="fv-plugins-message-container invalid-feedback" id="field-error-title"></div>
											</div>
										</div>
									</div>
								</div>
								<div class="row mb-6">
									<label class="col-lg-4 col-form-label required fw-semibold fs-6">URL</label>
									<div class="col-lg-8 fv-row">
										<input class="form-control form-control-lg form-control-solid" type="text" name="slug" placeholder="URL" value="{{ contentType.slug }}">
										<div class="fv-plugins-message-container invalid-feedback" id="field-error-slug"></div>
									</div>
								</div>
								<div class="row mb-6">
									<label class="col-lg-4 col-form-label required fw-semibold fs-6">Single Type</label>
									<div class="col-lg-8 fv-row">
										<div class="form-check form-switch form-check-custom form-check-success form-check-solid">
											<input id="beaver_flexSwitchCustomDefault_1_1" class="form-check-input" type="checkbox" name="single_type" value="true" {{ 'checked' if contentType.single_type }}>
											<label class="form-check-label" for="beaver_flexSwitchCustomDefault_1_1"></label>
										</div>
										<div class="fv-plugins-message-container invalid-feedback" id="field-error-single_type"></div>
									</div>
								</div>
								<div class="row mb-6">
									<label class="col-lg-4 col-form-label required fw-semibold fs-6">Editor Type</label>
									<div class="col-lg-8 fv-row">
										<div class="form-check form-switch form-check-custom form-check-success form-check-solid">
											<input id="beaver_flexSwitchCustomDefault_1_1" class="form-check-input" type="checkbox" name="page_builder" value="true" {{ 'checked' if contentType.page_builder }}>
											<label class="form-check-label" for="beaver_flexSwitchCustomDefault_1_1">
												Page Builder
											</label>
										</div>
										<div class="fv-plugins-message-container invalid-feedback" id="field-error-single_type"></div>
									</div>
								</div>

								<div class="row mb-6">
									<label class="col-lg-4 col-form-label required fw-semibold fs-6">Position</label>
									<div class="col-lg-8 fv-row">
										<input class="form-control form-control-lg form-control-solid" type="number" name="position" placeholder="Position" value="{{ contentType.position }}">
										<div class="fv-plugins-message-container invalid-feedback" id="field-error-position"></div>
									</div>
								</div>

								<div class="row mb-6">
									<label class="col-lg-4 col-form-label required fw-semibold fs-6">Admin Icon (SVG Code)
										<br>
									</label>

									<div class="col-lg-1 col-sm-2 fv-row">
										<span id="svg-icon-preview">{{ contentType.admin_icon | safe }}</span>
										<input type="hidden" name="admin_icon" id="admin-svg-icon-form-field" value="{{ contentType.admin_icon }}"></input>
										<div class="fv-plugins-message-container invalid-feedback" id="field-error-admin_icon"></div>
									</div>
									<div class="col-lg-2">
										<button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#icon-list-modal">
											Choose Nav Icon
										</button>
									</div>
								</div>

								<div class="row mb-6">
									<label class="col-lg-4 col-form-label required fw-semibold fs-6">Admin Nav Section</label>
									<div class="col-lg-8 fv-row">
										<select class="form-select form-select-lg form-select-solid" name="admin_nav_section">
											<option value="">Default</option>
											{% for navGroup in mixedNavSections %}
												<option value="{{ navGroup }}" {{'selected' if contentType.admin_nav_section == navGroup }}>{{ navGroup }}</option>
											{% endfor %}
										</select>
										<div class="fv-plugins-message-container invalid-feedback" id="field-error-admin_nav_section"></div>
									</div>
								</div>

								<div class="row mb-6">
									<label class="col-lg-4 col-form-label required fw-semibold fs-6">Attachable type</label>
									<div class="col-lg-8 fv-row">
										<select class="form-select form-select-lg form-select-solid" data-control="select2" data-close-on-select="false" name="attachable_type" data-placeholder="Select a type" data-allow-clear="true" multiple="multiple">
											{% for ct in contentTypes %}
												{# <option value="{{ ct.slug }}" {{ 'selected' if contentType.allowed_type.find((at)=>at==ct.slug) }}>{{ ct.title }}</option> #}
												<option value="{{ ct.slug }}" {{'selected' if contentType.allowed_type and ct.slug in contentType.allowed_type }}>{{ ct.title }}</option>
											{% endfor %}
										</select>
										<div class="fv-plugins-message-container invalid-feedback" id="field-error-attachable_type"></div>
									</div>
								</div>

							</div>
						</div>
					</div>

					<div class="card mb-5 mb-xl-10">
						<div class="card-header border-0 cursor-pointer" role="button" data-bs-toggle="collapse" data-bs-target="#beaver_account_profile_details" aria-expanded="true" aria-controls="beaver_account_profile_details">
							<div class="card-title m-0">
								<h3 class="fw-bold m-0">Features Checklist</h3>
							</div>
						</div>
						<div id="beaver_account_settings_profile_details">
							<div class="card-body border-top p-9">
								<div class="row mb-6">
									<span class="col-lg-4 col-form-label required fw-semibold fs-6">Features Checklist</span>
									<small>Please include the following in your content type.</small>
									<div class="row mt-3">
										<div class="form-check form-check-custom form-check-solid form-check-sm col-md-4 mt-4">
											<input id="has_slug" class="form-check-input" type="checkbox" value="true" name="has_slug" {{ 'checked' if contentType.has_slug }}>
											<label class="form-check-label" for="has_slug">Has Slug (URL)</label>
										</div>
										<div class="form-check form-check-custom form-check-solid form-check-sm col-md-4 mt-4">
											<input class="form-check-input" type="checkbox" value="true" name="active" id="active" {{ 'checked' if contentType.active }}>
											<label class="form-check-label" for="active">Active</label>
										</div>
										<div class="form-check form-check-custom form-check-solid form-check-sm col-md-4 mt-4">
											<input class="form-check-input" type="checkbox" value="true" name="nav_on_collection_api" id="nav_on_collection_api" {{ 'checked' if contentType.nav_on_collection_api }}>
											<label class="form-check-label" for="nav_on_collection_api">Navigation On Collection API</label>
										</div>
										<div class="form-check form-check-custom form-check-solid form-check-sm col-md-4 mt-4">
											<input class="form-check-input" type="checkbox" value="true" name="nav_on_single_api" id="nav_on_single_api" {{ 'checked' if contentType.nav_on_single_api }}>
											<label class="form-check-label" for="nav_on_single_api">Navigation on Detail API</label>
										</div>
										<div class="form-check form-check-custom form-check-solid form-check-sm col-md-4 mt-4">
											<input class="form-check-input" type="checkbox" value="true" name="has_form" id="has_form" {{ 'checked' if contentType.has_form }}>
											<label class="form-check-label" for="has_form">Has Form</label>
										</div>
										<div class="form-check form-check-custom form-check-solid form-check-sm col-md-4 mt-4">
											<input class="form-check-input" type="checkbox" value="true" name="has_api_endpoint" id="has_api_endpoint" {{ 'checked' if contentType.has_api_endpoint }}>
											<label class="form-check-label" for="has_api_endpoint">Has API Endpoint</label>
										</div>
										<div class="form-check form-check-custom form-check-solid form-check-sm col-md-4 mt-4">
											<input class="form-check-input" type="checkbox" value="true" name="has_meta" id="has_meta" {{ 'checked' if contentType.has_meta }}>
											<label class="form-check-label" for="has_meta">Has Meta</label>
										</div>

									</div>
								</div>
							</div>

							<div class="card-footer d-flex justify-content-end py-6 px-9">
								<button class="btn btn-primary form-submit-btn" id="beaver_account_profile_details_submit" type="submit">
									<span class="preloader d-none">Saving...</span>
									<span class="label">Save</span>
								</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</form>
	</div>

{% endblock %}

{% block widgets %}
	<div class="modal fade" tabindex="-1" id="icon-list-modal">
		<div class="modal-dialog modal-dialog-scrollable">
			<div class="modal-content">
				<div class="modal-header">
					<h1 class="modal-title">Icon List</h1>

					<!--begin::Close-->
					<div class="btn btn-icon btn-sm btn-active-light-primary ms-2" data-bs-dismiss="modal" aria-label="Close">
						<span class="svg-icon svg-icon-1"></span>
					</div>
					<!--end::Close-->
				</div>

				<div class="modal-body">
					{% for icon in icons %}
						<h3 class="badge badge-light-success mb-3">{{icon.name | upper }}</h3>
						<ul class="list-inline mb-5">
							{% for svg in icon.items %}
								<li class="list-inline-item svg-item">
									<a href="#" class="btn svg-btn">{{svg | safe}}</a>
								</li>
							{% endfor %}
						</ul>

					{% endfor %}
				</div>

				<div class="modal-footer">
					<button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
					<button type="button" class="btn btn-primary" data-bs-dismiss="modal" id="add-icon-modal-btn">Add Icon</button>
				</div>
			</div>
		</div>
	</div>
{% endblock %}