{% 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 #}
{% endblock %}

{% block content %}
	{% block title %}
		<title>{{ pluralToSingular(reqContentType.title) }} Detail - {{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">{{ pluralToSingular(reqContentType.title) }} Detail</h1>
					<ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
						<li class="breadcrumb-item text-muted">
							<a class="text-muted" >Content</a>
						</li>
						<li class="breadcrumb-item">
							<span class="bullet bg-gray-400 w-5px h-2px"></span>
						</li>
						<li class="breadcrumb-item text-muted">
							<a class="text-muted text-hover-primary" href="/admin/cms/{{ reqContentType.slug }}">{{ reqContentType.title }}</a>
						</li>
						{% if reqContentType.single_type == false %}
							<li class="breadcrumb-item">
								<span class="bullet bg-gray-400 w-5px h-2px"></span>
							</li>
							{# <li class="breadcrumb-item text-muted">{{ contentDetail.content[default_lang.prefix][reqContentType.field_groups[0].row_label][reqContentType.field_groups[0].fields[0].field_name] }}</li> #}
							<li class="breadcrumb-item text-muted">{{ contentDetail.slug }}</li>
						{% endif %}
					</ul>
				</div>
				<div class="d-flex align-items-center gap-2 gap-lg-3">
					{% if reqContentType.single_type == false %}
						<a class="btn btn-sm fw-bold btn-success" href="/admin/cms/{{ reqContentType.slug }}/add">Add New {{ pluralToSingular(reqContentType.title) }}</a>
					{% endif %}
					<a class="btn btn-sm fw-bold btn-primary" href="/admin/cms/{{ reqContentType.slug }}/duplicate/{{ contentDetail._id }}">Duplicate {{ pluralToSingular(reqContentType.title) }}</a>
					<a class="btn btn-sm fw-bold btn-primary" href="/admin/cms/{{ reqContentType.slug }}/edit/{{ contentDetail._id }}">Edit {{ pluralToSingular(reqContentType.title) }}</a>
				</div>
			</div>
		</div>

		<div class="app-content flex-column-fluid" id="beaver_app_content">
			<div class="app-container container-xxl" id="beaver_app_content_container">
				<div class="row">
					<div class="col-12 col-sm-7 col-md-8 col-lg-9">
						<div class="d-flex flex-column flex-lg-row">
							<div class="flex-lg-row-fluid me-lg-15 order-2 order-lg-1 mb-10 mb-lg-0">
								<div class="card card-flush pt-3 mb-5 mb-lg-10">
									<div class="card-body pt-0">
										<ul class="nav nav-tabs nav-line-tabs mb-5 fs-6" id="cms-editor-tab-nav">
											{% if has_bilingual_field_groups %}
												{% 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 %}
											{% endif %}

											{% if has_common_field_groups %}
												<li class="nav-item">
													<a class="nav-link" data-bs-toggle="tab" href="#beaver_tab_pane_common">General</a>
												</li>
											{% endif %}

											{% if contentDetail.revisions and contentDetail.revisions.length %}
												<li class="nav-item">
													<a class="nav-link" data-bs-toggle="tab" href="#kt_tab_pane_revisions">Revision</a>
												</li>
											{% endif %}

											{% if reqContentType.has_meta %}
												<li class="nav-item">
													<a class="nav-link" data-bs-toggle="tab" href="#beaver_tab_pane_meta">Meta</a>
												</li>
											{% endif %}
										</ul>
										<div class="tab-content tab-content-fields" id="content-detail-tab">
											{% if has_bilingual_field_groups %}
												{% for brandLanguage in authUser.brand.languages %}
													<div class="tab-pane fade {{ 'active show' if loop.index == 1 }}" role="tabpanel" dir="{{brandLanguage.dir}}" id="beaver_tab_pane_{{ brandLanguage.prefix }}">
														<div class="row">
															<div class="col-12">
																{% for cfg in reqContentType.field_groups %}
																	{% if cfg.localisation == true %}
																		<h1 class="mt-5 mb-2">{{ cfg.row_label.toUpperCase() }}</h1>
																		{% if cfg.repeater_group %}
																			{% for eachRepeaterObject in contentDetail.content[brandLanguage.prefix][cfg.row_name] %}
																				<div class="row">
																					{% for eachKey in ObjectKeys(eachRepeaterObject) %}
																						{# {% if cfg.fields[loop.index-1].field_name.length %} #}
																						<div class="col-12 col-sm-6">
																							<span class="badge badge-light">{{ eachKey.toUpperCase() }} :</span>
																							{% set fieldValue = '<img width="80" src="' + eachRepeaterObject[eachKey]['url'] + '"/>' if ObjectKeys(eachRepeaterObject[eachKey])[0] == 'url' else 
																								eachRepeaterObject[eachKey] %}
																							<div class="">{{ fieldValue | safe }}</div>
																							<br>
																						</div>
																						{# {% endif %} #}
																					{% endfor %}
																				</div>
																			{% endfor %}
																		{% else %}
																			{% for cf in cfg.fields %}
																				<div class="">
																					<span class="badge badge-dark">{{ cf.field_label }}</span>
																				</div>
																				<div class="mt-3 mb-5">
																					{% if cf.field_type == 'media' %}
																						<img src="{{ contentDetail.content[brandLanguage.prefix][cfg.row_name][cf.field_name].url }}" style="max-width: 200px;">
																					{% else %}
																						{{ contentDetail.content[brandLanguage.prefix][cfg.row_name][cf.field_name] | safe }}
																					{% endif %}
																				</div>
																			{% endfor %}
																		{% endif %}
																	{% endif %}
																{% endfor %}
															</div>
														</div>
													</div>
												{% endfor %}
											{% endif %}

											{% if has_common_field_groups %}
												<div class="tab-pane fade" role="tabpanel" id="beaver_tab_pane_common">
													<div class="row">
														<div class="col-12">
															{% for cfg in reqContentType.field_groups %}
																{% if cfg.localisation == false %}
																	<h1 class="mt-5 mb-2">{{cfg.row_label.toUpperCase()}}</h1>
																	{% if cfg.repeater_group %}
																		<div class="row">
																			{# {% set content = contentDetail.content['common'][cfg.row_name] %}
																			{% if content %} #}
																			{% for eachRepeaterObject in contentDetail.content['common'][cfg.row_name] %}
																				<div class="row">
																					{% for eachKey in ObjectKeys(eachRepeaterObject) %}
																						<div class="col-12 col-sm-6">
																							<span class="badge badge-light">{{ eachKey.toUpperCase() }} :</span>
																							{% set fieldValue = '<img width="80" src="' + eachRepeaterObject[eachKey]['url'] + '"/>' if ObjectKeys(eachRepeaterObject[eachKey])[0] == 'url' else 
																								eachRepeaterObject[eachKey] %}
																							<span class="badge badge-light-info">{{ fieldValue | safe }}</span>
																							<br>
																						</div>
																					{% endfor %}
																				</div>
																			{% endfor %}
																			{# {% endif %} #}
																		</div>
																	{% else %}
																		{% for cf in cfg.fields %}
																			<div class="">
																				<span class="badge badge-dark">{{ cf.field_label }}</span>
																			</div>
																			<div class="mt-3 mb-5">
																				{% if cf.field_type == 'media' %}
																					<img src="{{ contentDetail.content['common'][cfg.row_name][cf.field_name].url }}" style="max-width: 200px;">
																				{% else %}
																					{{ contentDetail.content['common'][cfg.row_name][cf.field_name] | safe }}
																				{% endif %}
																			</div>
																		{% endfor %}
																	{% endif %}
																{% endif %}
															{% endfor %}
														</div>
													</div>
												</div>
											{% endif %}

											{% if contentDetail.revisions and contentDetail.revisions.length %}
												{% set latestRevision = contentDetail.revisions[contentDetail.revisions.length - 1] or {} %}
												{% set latestRevisionContent = latestRevision.content or {} %}
												<div class="tab-pane fade" role="tabpanel" id="kt_tab_pane_revisions">
													{% if latestRevisionContent %}
														<h2>Revision Number : {{ latestRevision.revision_number }}</h2>
														<h2>Status : 
															{% if latestRevisionContent.status == 'published' %}
															<span class="badge badge-success">Published</span>
															{% else %}
															<span class="badge badge-danger">Unpublished</span>
															{% endif %}
														</h2>

														{% for brandLanguage in authUser.brand.languages %}
															<span class="badge badge-success text-uppercase my-5">{{ brandLanguage.name }}</span>
															{# BEGIN::Custom Fields with Multi language #}
															<div class="row">
																<div class="col-12">
																	{% for cfg in reqContentType.field_groups %}
																		{% if cfg.localisation == true %}
																			<h1 class="mt-5 mb-2">{{ cfg.row_label.toUpperCase() }}</h1>
																			{% if cfg.repeater_group %}
																				{% for eachRepeaterObject in latestRevisionContent.content[brandLanguage.prefix][cfg.row_name] %}
																					<div class="row">
																						{% for eachKey in ObjectKeys(eachRepeaterObject) %}
																							{# {% if cfg.fields[loop.index-1].field_name.length %} #}
																							<div class="col-12 col-sm-6">
																								<span class="badge badge-light">{{ eachKey.toUpperCase() }} :</span>
																								{% set fieldValue = '<img width="80" src="' + eachRepeaterObject[eachKey]['url'] + '"/>' if ObjectKeys(eachRepeaterObject[eachKey])[0] == 'url' else 
																									eachRepeaterObject[eachKey] %}
																								<div class="">{{ fieldValue | safe }}</div>
																								<br>
																							</div>
																							{# {% endif %} #}
																						{% endfor %}
																					</div>
																				{% endfor %}
																			{% else %}
																				{% for cf in cfg.fields %}
																					<div class="">
																						<span class="badge badge-dark">{{ cf.field_label }}</span>
																					</div>
																					<div class="mt-3 mb-5">
																						{% if cf.field_type == 'media' %}
																							<img src="{{ latestRevisionContent.content[brandLanguage.prefix][cfg.row_name][cf.field_name].url }}" style="max-width: 200px;">
																						{% else %}
																							{{ latestRevisionContent.content[brandLanguage.prefix][cfg.row_name][cf.field_name] | safe }}
																						{% endif %}
																					</div>
																				{% endfor %}
																			{% endif %}
																		{% endif %}
																	{% endfor %}
																</div>
															</div>
															{# END::Custom Fields with multi language #}
														{% endfor %}
														
														{# BEGIN::Custom Fields without Multi language #}
														{% if has_common_field_groups %}
															<span class="badge badge-success text-uppercase my-5">Common</span>
															<div class="row">
																<div class="col-12">
																	{% for cfg in reqContentType.field_groups %}
																		{% if cfg.localisation == false %}
																			<h1 class="mt-5 mb-2">{{cfg.row_label.toUpperCase()}}</h1>
																			{% if cfg.repeater_group %}
																				<div class="row">
																					{% for eachRepeaterObject in latestRevisionContent['common'][cfg.row_name] %}
																						<div class="row">
																							{% for eachKey in ObjectKeys(eachRepeaterObject) %}
																								<div class="col-12 col-sm-6">
																									<span class="badge badge-light">{{ eachKey.toUpperCase() }} :</span>
																									{% set fieldValue = '<img width="80" src="' + eachRepeaterObject[eachKey]['url'] + '"/>' if ObjectKeys(eachRepeaterObject[eachKey])[0] == 'url' else 
																										eachRepeaterObject[eachKey] %}
																									<span class="badge badge-light-info">{{ fieldValue | safe }}</span>
																									<br>
																								</div>
																							{% endfor %}
																						</div>
																					{% endfor %}
																					{# {% endif %} #}
																				</div>
																			{% else %}
																				{% for cf in cfg.fields %}
																					<div class="">
																						<span class="badge badge-dark">{{ cf.field_label }}</span>
																					</div>
																					<div class="mt-3 mb-5">
																						{% if cf.field_type == 'media' %}
																							<img src="{{ latestRevisionContent.content['common'][cfg.row_name][cf.field_name].url }}" style="max-width: 200px;">
																						{% else %}
																							{{ latestRevisionContent.content['common'][cfg.row_name][cf.field_name] | safe }}
																						{% endif %}
																					</div>
																				{% endfor %}
																			{% endif %}
																		{% endif %}
																	{% endfor %}
																</div>
															</div>
														{% endif %}
														{# END::Common Custom Fields #}
													{% endif %}
												</div>
											{% endif %}

											{% if reqContentType.has_meta %}
												<div class="tab-pane fade" role="tabpanel" id="beaver_tab_pane_meta">
													<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="#meta_tab_{{ brandLanguage.prefix }}">{{ brandLanguage.name }}</a>
															</li>
														{% endfor %}
													</ul>

													<div class="tab-content" id="meta-lang-tabs">
														{% for brandLanguage in authUser.brand.languages %}
															<div class="tab-pane fade {{'show active' if loop.index == 1 }}" id="meta_tab_{{ brandLanguage.prefix }}" role="tabpanel">
																<div class="row">
																	<div class="col-12">
																		{% for meta_section in metaFields %}
																			<h3 class="badge badge-light-success">{{ meta_section.name }}</h3>
																			{% for meta_field in meta_section.fields %}
																				<div class="row mb-6">
																					<label class="col-lg-4 col-form-label required fw-semibold fs-6">{{ meta_field.label }}</label>
																					<div class="col-lg-8 pt-2">
																						{# {{meta_field.type}} #}
																						{# {% if contentDetail
																							.meta and contentDetail
																							.meta[brandLanguage.prefix][meta_section.slug] and contentDetail
																							.meta[brandLanguage.prefix][meta_section.slug][meta_field.name] %} #}
																						{% set metaFieldValue = contentDetail.meta[brandLanguage.prefix][meta_section.slug][meta_field.name] %}
																						{# {% elif meta_field.type == 'media' %}
																							{% set metaFieldValue = '<img src="{{ metaFieldValue.url }}" style="max-width: 150px;"/>' %} #}
																						{% if meta_field.type == 'media' %}
																							{# {{metaFieldValue}} #}
																							<img src="{{ metaFieldValue.url }}" style="max-width: 50px;"/>
																							{# {% set metaFieldValue = '' %} #}
																						{% else %}
																							{{ metaFieldValue }}
																						{% endif %}
																						{# {{ metaFieldValue }} #}
																					</div>
																				</div>
																			{% endfor %}
																		{% endfor %}
																	</div>
																</div>
															</div>
														{% endfor %}
													</div>
												</div>
											{% endif %}
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="col-12 col-sm-5 col-md-4 col-lg-3">
						<div class="card card-flush pt-3 mb-5 mb-lg-10">
							<div class="card-body">
								Status: 
								{% if contentDetail.status == 'published' %}
									<span class="badge badge-light-success">
										{{ contentDetail.status }}
									</span>
								{% elif contentDetail.status == 'scheduled' %}
									<span class="badge badge-light-warning">
										{{ contentDetail.status }}
									</span>
									<br>
									<small>{{contentDetail.scheduled_dt_range | safe}}</small>
								{% else %}
									<span class="badge badge-light-danger">
										{{ contentDetail.status }}
									</span>
								{% endif %}
								<hr class="my-3">
								<p>
									<small>
										{% if reqContentType.single_type %}
										API Endpoint: 
										<br>
											<code>
												<a href="{{ baseURL }}/api/cms/{{ reqContentType.slug }}" target="_blank">{{ baseURL }}/api/cms/{{ reqContentType.slug }}</a>
											</code>
										{% else %}
										API Endpoint (Collection):
										<br>
											<code>
												<a href="{{ baseURL }}/api/cms/{{ reqContentType.slug }}" target="_blank">{{ baseURL }}/api/cms/{{ reqContentType.slug }}</a>
											</code>
											<br>
										API Endpoint (Detail):
										<br>
											<code>
												<a href="{{ baseURL }}/api/cms/{{ reqContentType.slug }}/{{ contentDetail.slug }}" target="_blank">{{ baseURL }}/api/cms/{{ reqContentType.slug }}/{{ contentDetail.slug }}</a>
											</code>
										{% endif %}
									</small>
								</p>
							</div>
						</div>
						<div class="card card-flush pt-3 mb-0"
							data-kt-sticky="true"
							data-kt-sticky-name="subscription-summary"
							data-kt-sticky-offset="{default: false, lg: '200px'}"
							data-kt-sticky-width="{lg: '250px', xl: '300px'}"
							data-kt-sticky-left="auto"
							data-kt-sticky-top="150px"
							data-kt-sticky-animation="false"
							data-kt-sticky-zindex="95">

						<div class="card-header">
							<div class="card-title">
							<h2>Summary</h2>
							</div>
						</div>

						<div class="card-body pt-0 fs-6">
							<div class="mb-7">
							<h5 class="mb-3">Author details</h5>
							{% if contentDetail.author and contentDetail.author._id %}
								<div class="d-flex align-items-center mb-1">
								<a class="fw-bold text-gray-800 text-hover-primary me-2">{{ contentDetail.author.name }}</a>
								<span class="badge badge-light-success text-capitalize">{{ contentDetail.author.role }}</span>
								</div>
								<a class="fw-semibold text-gray-600 text-hover-primary">{{ contentDetail.author.email }}</a>
								<br>
								<span class="fw-semibold text-gray-600">{{ convertDateCustom(contentDetail.created_at, 'dd/MM/yyyy HH:mm:ss') }}</span>
							{% else %}
								<div class="d-flex align-items-center mb-1">
								<a class="fw-bold text-gray-800 text-hover-primary me-2">Author name</a>
								<span class="badge badge-light-success text-capitalize">Author Role</span>
								</div>
								<a class="fw-semibold text-gray-600 text-hover-primary">Author email</a>
								<br>
								<span class="fw-semibold text-gray-600">{{ convertDateCustom(contentDetail.created_at, 'dd/MM/yyyy HH:mm:ss') }}</span>
							{% endif %}
							</div>

							<div class="separator separator-dashed mb-7"></div>

							{% if contentDetail.last_edited_user and contentDetail.revisions and contentDetail.revisions.length %}
							{% set latestRevision = contentDetail.revisions[contentDetail.revisions.length - 1] %}
							<div class="mb-7">
								<h5 class="mb-3">Update details</h5>
								<div class="d-flex align-items-center mb-1">
								<a class="fw-bold text-gray-800 text-hover-primary me-2">{{ contentDetail.last_edited_user.name }}</a>
								<span class="badge badge-light-success text-capitalize">{{ contentDetail.last_edited_user.role }}</span>
								</div>
								<a class="fw-semibold text-gray-600 text-hover-primary">{{ contentDetail.last_edited_user.email }}</a>
								<br>
								<span class="fw-semibold text-gray-600">{{ convertDateCustom(contentDetail.updated_at, 'dd/MM/yyyy HH:mm:ss') }}</span>
							</div>
							<div class="separator separator-dashed mb-7"></div>
							{% endif %}
						</div>
						</div>

					</div>
				</div>
			</div>
		</div>
	</div>
{% endblock %}