{% 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/assets/plugins/custom/jstree/jstree.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 #}
    {# // begin::Custom Javascript(used by this page) #}
    {# //- script(src='https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js') #}
    {# <script src='https://cdn.jsdelivr.net/npm/lazyload@2.0.0-rc.2/lazyload.js'></script> #}
    {# <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.10/clipboard.min.js"></script> #}
    {# <script src='/cms-static/admin/assets/js/custom/apps/ecommerce/catalog/products.js'></script> #}
    {# //- script(src='/cms-static/admin/assets/js/widgets.bundle.js') #}
    {# //- script(src='/cms-static/admin/assets/js/custom/widgets.js') #}

    {# <script src='/cms-static/admin/assets/js/custom/utilities/modals/create-app.js'></script> #}
    {# <script src='/cms-static/admin/assets/js/custom/utilities/modals/users-search.js'></script> #}
    {# <script src='/cms-static/admin/assets/plugins/custom/jstree/jstree.bundle.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 %}{% endblock %}

{% block content %}
    <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">Page Builder</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">Page Builder</li>
                    </ul>
                </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">
                <form class="form es-form d-flex flex-column flex-lg-row" id="beaver_subscriptions_create_new" action="/admin/cms/{{reqContentType.slug}}/save" data-redirect-url="/admin/cms/{{reqContentType.slug}}" enctype="multipart/form-data" method="post">
                    <input type="hidden" name="_id" value="{{ contentDetail._id }}">
                    <div class="d-flex flex-column flex-row-fluid gap-7 gap-lg-10">
                        <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">New Content</h3>
                                </div>
                            </div> #}
                            <div id="beaver_account_settings_profile_details">
                                <div class="card-body border-top p-9">

                                    <ul class="nav nav-tabs nav-line-tabs mb-5 fs-6">
                                        <li class="nav-item">
                                            <a class="nav-link active" data-bs-toggle="tab" href="#beaver_tab_pane_general">
                                                General
                                                <span class="fa-solid fa-circle-exclamation d-none tab-invalid-icon"></span>
                                            </a>
                                        </li>
                                        {% if reqContentType.has_meta %}
                                            <li class="nav-item">
                                                <a class="nav-link" data-bs-toggle="tab" href="#beaver_tab_pane_meta">
                                                    Meta
                                                    <span class="fa-solid fa-circle-exclamation d-none tab-invalid-icon"></span>
                                                </a>
                                            </li>
                                        {% endif %}
                                    </ul>

                                    <div class="tab-content tab-content-fields" id="myTabContent">
                                        <div class="tab-pane fade active show" role="tabpanel" id="beaver_tab_pane_general">
                                            <div class="row mb-6">
                                                <label class="col-lg-4 col-form-label fw-semibold fs-6">
                                                    <span class="required">Name</span>
                                                    <i class="fas fa-exclamation-circle ms-1 fs-7" data-bs-toggle="tooltip" title="Current password should be enter to update profile details"></i>
                                                </label>
                                                <div class="col-lg-8 fv-row">
                                                    <input class="form-control form-control-lg form-control-solid" type="text" name="name" placeholder="Template Name" value="{{contentDetail.content.name}}"/>
                                                    <div class="fv-plugins-message-container invalid-feedback" id="field-error-name"></div>
                                                </div>
                                            </div>
                                        </div>

                                        {% 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 mt-5 pt-5">
                                                                <div class="col-12 mt-5">
                                                                    {% for meta_section in metaFields %}
                                                                        <div class="border border-gray-200 bg-slate-200 p-4 rounded-lg mb-4">
                                                                            <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 fw-semibold fs-6">{{ meta_field.label }}</label>
                                                                                    <div class="col-lg-8 pt-2">
                                                                                        {% set metaFieldValue = '' %}
                                                                                        {% 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] %}
                                                                                        {% endif %}
                                                                                        {% if meta_field.type == 'textarea' %}
                                                                                            <textarea class="form-control" name="meta[{{ brandLanguage.prefix }}][{{ meta_section.slug }}][{{ meta_field.name }}]" placeholder="{{ meta_field.label }}">{{ metaFieldValue }}</textarea>
                                                                                        {% elif meta_field.type == 'media' %}
                                                                                            <span class='media-uploader-field'>
                                                                                                <span class="media_preview">
                                                                                                    <span class="preview-holder">
                                                                                                        {% if metaFieldValue.url %}
                                                                                                            <img src="{{ metaFieldValue.url }}" style="max-width: 150px;"/>
                                                                                                        {% endif %}
                                                                                                    </span>
                                                                                                    <a class="btn btn-danger btn-icon image-preview-remove-btn my-1 {% if not metaFieldValue.url %}d-none{% endif %}">
                                                                                                        <i class="fa fa-trash" tabindex="-1"></i>
                                                                                                    </a>
                                                                                                </span>
                                                                                                <input type="hidden" class="media_url_field" name="meta[{{ brandLanguage.prefix }}][{{ meta_section.slug }}][{{ meta_field.name }}][url]" value="{{ metaFieldValue[url] }}">
                                                                                                <input type="hidden" class="media_title_field" name="meta[{{ brandLanguage.prefix }}][{{ meta_section.slug }}][{{ meta_field.name }}][title]" value="{{ metaFieldValue[title] }}">
                                                                                                <input type="hidden" class="media_alt_text_field" name="meta[{{ brandLanguage.prefix }}][{{ meta_section.slug }}][{{ meta_field.name }}][alt_text]" value="{{ metaFieldValue[alt_text] }}">
                                                                                                <a class="btn btn-success media-uploader-modal-btn" id="beaver-media-field-{{loop.index}}-{{range(100,10000)|random}}" data-bs-toggle='modal' data-bs-target='#beaver_modal_media_list'>Attach Media</a>
                                                                                            </span>
                                                                                        {% else %}
                                                                                            <input type="text" class="form-control" name="meta[{{ brandLanguage.prefix }}][{{ meta_section.slug }}][{{ meta_field.name }}]" placeholder="{{ meta_field.label }}" value="{{ metaFieldValue }}">
                                                                                        {% endif %}
                                                                                    </div>
                                                                                </div>
                                                                            {% endfor %}
                                                                        </div>
                                                                    {% endfor %}
                                                                </div>
                                                            </div>
                                                        </div>
                                                    {% endfor %}
                                                </div>

                                            </div>
                                        {% endif %}
                                    </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">Updating</span>
                                        <span class="label">Save & Continue</span></button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="d-flex flex-column gap-7 gap-lg-10 w-100 w-lg-300px mb-7 ms-lg-10">
                        {% if reqContentType.has_slug %}
                            {% include '../partials/_content-slug-field.njk' %}
                        {% endif %}

                        {% include '../partials/_publish.njk' %}

                        {% if reqContentType.allowed_type and reqContentType.allowed_type.length %}
                            {% include '../partials/_attach-content-type.njk' %}
                        {% endif %}

                        {# {% include '../partials/_add-to-home.njk' %} #}

                        {% if reqContentType.single_type == false %}
                            {% include '../partials/_position.njk' %}
                        {% endif %}
                    </div>

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

{% endblock %}