@using CRS.HybridSearch.Models.HybridMenu
@using CRS.HybridSearch.Domain.HybridMenu
@using Smartstore.Web.Rendering
@model HybridMenuTabModel

@*
    HybridMenu Edit-Tab (rendered inside the Category- and MenuItem-edit forms).
    Layout 1:1 zum Original-MegaMenu portiert: 4 sichtbare Sektionen (Allgemein,
    Layout, Background-Picture, Teaser) plus die uebliche Localized-Editor-Sektion.
    JS-Toggles steuern, welche Rows je nach TeaserType / DisplayBgPicture / etc.
    sichtbar sind, damit der User immer nur die relevanten Felder sieht.
*@

<input type="hidden" name="CustomProperties[hybridmenu].__Type__" value="@typeof(HybridMenuTabModel).AssemblyQualifiedName" />
<input type="hidden" asp-for="EntityId" />
<input type="hidden" asp-for="EntityType" />

@* ---------- Sektion 1: Allgemein ---------- *@
<div class="adminContent">
    <div class="adminRow">
        <div class="adminTitle"><smart-label asp-for="IsActive" /></div>
        <div class="adminData"><editor asp-for="IsActive" /></div>
    </div>
    <div class="adminRow">
        <div class="adminTitle"><smart-label asp-for="DisplayCategoryPicture" /></div>
        <div class="adminData"><editor asp-for="DisplayCategoryPicture" /></div>
    </div>
</div>

@* "Layout" block removed from this per-category tab — moved to the global
   plugin configuration (admin/hybridsearch/configure → Hybrid-Menu group).
   The DB columns (MaxItemsPerColumn, AllowSubItemsColumnWrap, SubItemsWrapTolerance,
   FavorInHybridMenu, MinChildCategoryThreshold, MaxSubItemsPerCategory,
   MaxSubItemsLevel3) remain on CrsHybridMenu for backwards-compat / rollback. *@

@* ---------- Sektion 3: Background-Picture ---------- *@
<div class="adminContent">
    <div class="adminRow">
        <div class="admin-config-group">
            <div class="title">@T("Plugins.CRS.HybridSearch.HybridMenu.Group.Background")</div>
            <p class="text-muted">@T("Plugins.CRS.HybridSearch.HybridMenu.Group.Background.Hint")</p>
        </div>
    </div>
    <div class="adminRow">
        <div class="adminTitle"><smart-label asp-for="DisplayBgPicture" /></div>
        <div class="adminData"><editor asp-for="DisplayBgPicture" /></div>
    </div>
    <div class="adminRow bg-picture">
        <div class="adminTitle"><smart-label asp-for="BgPictureId" /></div>
        <div class="adminData">
            <editor asp-for="BgPictureId" />
            @if (ViewBag.HasCrsCreator == true)
            {
                <button type="button" class="btn btn-sm btn-secondary mt-2 hm-pick-crs-creator"
                        data-picker-url="@ViewBag.CrsCreatorMediaPickerUrl"
                        data-target="@Html.IdFor(m => m.BgPictureId)">
                    <i class="fa fa-images"></i> Aus CRS Mediathek
                </button>
            }
        </div>
    </div>
    <div class="adminRow bg-picture">
        <div class="adminTitle"><smart-label asp-for="BgAlignX" /></div>
        <div class="adminData"><editor asp-for="BgAlignX" /></div>
    </div>
    <div class="adminRow bg-picture">
        <div class="adminTitle"><smart-label asp-for="BgAlignY" /></div>
        <div class="adminData"><editor asp-for="BgAlignY" /></div>
    </div>
    <div class="adminRow bg-picture">
        <div class="adminTitle"><smart-label asp-for="BgOffsetX" /></div>
        <div class="adminData"><editor asp-for="BgOffsetX" /></div>
    </div>
    <div class="adminRow bg-picture">
        <div class="adminTitle"><smart-label asp-for="BgOffsetY" /></div>
        <div class="adminData"><editor asp-for="BgOffsetY" /></div>
    </div>
    <div class="adminRow bg-picture">
        <div class="adminTitle"><smart-label asp-for="BgPictureOpacity" /></div>
        <div class="adminData">
            @* HTML5 range slider with live value badge. The backing model is an int 0..100. *@
            <div class="d-flex align-items-center" style="gap:10px">
                <input type="range" min="0" max="100" step="1" asp-for="BgPictureOpacity"
                       class="form-range flex-grow-1"
                       oninput="this.parentElement.querySelector('.badge').textContent=this.value+'%'" />
                <span class="badge bg-secondary" style="min-width:46px">@Model.BgPictureOpacity%</span>
            </div>
        </div>
    </div>
    <div class="adminRow bg-picture">
        <div class="adminTitle"><smart-label asp-for="BgPictureCover" /></div>
        <div class="adminData"><editor asp-for="BgPictureCover" /></div>
    </div>
    <div class="adminRow bg-picture">
        <div class="adminData wide" id="hm-bg-link-localized">
            @(Html.LocalizedEditor<HybridMenuTabModel, HybridMenuTabLocalizedModel>("hm-bglink",
                @<text>
                    <input type="hidden" asp-for="Locales[@item].LanguageId" />
                    <div class="adminRow">
                        <div class="adminTitle"><smart-label asp-for="Locales[@item].BgLink" /></div>
                        <div class="adminData"><editor asp-for="Locales[@item].BgLink" /></div>
                    </div>
                </text>,
                @<text>
                    <div class="adminRow">
                        <div class="adminTitle"><smart-label asp-for="BgLink" /></div>
                        <div class="adminData"><editor asp-for="BgLink" /></div>
                    </div>
                </text>))
        </div>
    </div>
</div>

@* ---------- Sektion 4: Teaser ---------- *@
<div class="adminContent">
    <div class="adminRow">
        <div class="admin-config-group">
            <div class="title">@T("Plugins.CRS.HybridSearch.HybridMenu.Group.Teaser")</div>
            <p class="text-muted">@T("Plugins.CRS.HybridSearch.HybridMenu.Group.Teaser.Hint")</p>
        </div>
    </div>
    <div class="adminRow">
        <div class="adminTitle"><smart-label asp-for="TeaserType" /></div>
        <div class="adminData">
            <editor asp-for="TeaserType" />
        </div>
    </div>

    @* Short summary: visible when category-picture-spalte is enabled *@
    <div class="adminRow" id="hm-short-summary">
        <div class="adminData wide">
            @(Html.LocalizedEditor<HybridMenuTabModel, HybridMenuTabLocalizedModel>("hm-summary",
                @<text>
                    <input type="hidden" asp-for="Locales[@item].LanguageId" />
                    <div class="adminRow">
                        <div class="adminTitle"><smart-label asp-for="Locales[@item].Summary" /></div>
                        <div class="adminData wide"><editor asp-for="Locales[@item].Summary" /></div>
                    </div>
                </text>,
                @<text>
                    <div class="adminRow">
                        <div class="adminTitle"><smart-label asp-for="Summary" /></div>
                        <div class="adminData wide"><editor asp-for="Summary" /></div>
                    </div>
                </text>))
        </div>
    </div>

    @* HTML teaser *@
    <div class="adminRow toggle-teaser-html">
        <div class="adminTitle"><smart-label asp-for="HtmlColumnSpan" /></div>
        <div class="adminData"><editor asp-for="HtmlColumnSpan" /></div>
    </div>
    <div class="adminRow toggle-teaser-html" id="hm-teaser-html">
        <div class="adminData wide">
            @(Html.LocalizedEditor<HybridMenuTabModel, HybridMenuTabLocalizedModel>("hm-teaserhtml",
                @<text>
                    <input type="hidden" asp-for="Locales[@item].LanguageId" />
                    <div class="adminRow">
                        <div class="adminTitle"><smart-label asp-for="Locales[@item].TeaserHtml" /></div>
                        <div class="adminData wide"><editor asp-for="Locales[@item].TeaserHtml" /></div>
                    </div>
                </text>,
                @<text>
                    <div class="adminRow">
                        <div class="adminTitle"><smart-label asp-for="TeaserHtml" /></div>
                        <div class="adminData wide"><editor asp-for="TeaserHtml" /></div>
                    </div>
                </text>))
        </div>
    </div>

    @* Rotator *@
    <div class="adminRow toggle-teaser-rotator" id="hm-rotator-heading">
        <div class="adminData wide">
            @(Html.LocalizedEditor<HybridMenuTabModel, HybridMenuTabLocalizedModel>("hm-rotheading",
                @<text>
                    <input type="hidden" asp-for="Locales[@item].LanguageId" />
                    <div class="adminRow">
                        <div class="adminTitle"><smart-label asp-for="Locales[@item].RotatorHeading" /></div>
                        <div class="adminData"><editor asp-for="Locales[@item].RotatorHeading" /></div>
                    </div>
                </text>,
                @<text>
                    <div class="adminRow">
                        <div class="adminTitle"><smart-label asp-for="RotatorHeading" /></div>
                        <div class="adminData"><editor asp-for="RotatorHeading" /></div>
                    </div>
                </text>))
        </div>
    </div>
    <div class="adminRow toggle-teaser-rotator">
        <div class="adminTitle"><smart-label asp-for="TeaserRotatorItemSelectType" /></div>
        <div class="adminData"><editor asp-for="TeaserRotatorItemSelectType" /></div>
    </div>
    <div class="adminRow toggle-teaser-rotator" id="hm-teaser-rotator-product-ids">
        <div class="adminTitle"><smart-label asp-for="TeaserRotatorProductIds" /></div>
        <div class="adminData">
            <div class="row xs-gutters">
                <div class="input-group col">
                    <editor asp-for="TeaserRotatorProductIds" />
                </div>
                <div class="col-auto">
                    <a class="btn btn-light btn-to-danger" id="hm-reset-rotator-productids" href="#">
                        <i class="fa fa-times"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="adminRow toggle-teaser-rotator">
        <div class="adminTitle"><smart-label asp-for="MaxRotatorItems" /></div>
        <div class="adminData"><editor asp-for="MaxRotatorItems" /></div>
    </div>
</div>

<script>
    $(function () {
        // Bg-Picture: rows mit Klasse .bg-picture nur sichtbar, wenn DisplayBgPicture aktiv.
        var bgCb = $('#@(Html.IdFor(m => m.DisplayBgPicture))');
        function toggleBg() {
            if (bgCb.is(':checked')) { $('.bg-picture').show(); }
            else { $('.bg-picture').hide(); }
        }
        bgCb.on('click', toggleBg); toggleBg();

        // Kurz-Summary nur, wenn Category-Picture-Spalte aktiv.
        var catPicCb = $('#@(Html.IdFor(m => m.DisplayCategoryPicture))');
        function toggleCatPic() {
            if (catPicCb.is(':checked')) { $('#hm-short-summary').show(); }
            else { $('#hm-short-summary').hide(); }
        }
        catPicCb.on('click', toggleCatPic); toggleCatPic();

        // Teaser-Type: zeigt nur die relevanten Felder je nach Auswahl.
        var teaserType = $('#@(Html.IdFor(m => m.TeaserType))');
        function toggleTeaser() {
            var v = teaserType.val();
            var html = '@((int)TeaserType.Html)';
            var rotator = '@((int)TeaserType.AIMatching)';
            $('.toggle-teaser-html, .toggle-teaser-rotator').hide();
            if (v === html) { $('.toggle-teaser-html').show(); }
            else if (v === rotator) { $('.toggle-teaser-rotator').show(); }
        }
        teaserType.on('change', toggleTeaser); toggleTeaser();

        // Reset Rotator-Product-IDs.
        $('#hm-reset-rotator-productids').on('click', function (e) {
            e.preventDefault();
            $('#@(Html.IdFor(m => m.TeaserRotatorProductIds))').val('');
        });

        // CRS.Creator integration: open the Creator media browser in a popup, then on
        // 'cc:media:picked' update the BgPictureId hidden input AND swap the preview
        // thumbnail so the user sees the change immediately. Button is only rendered
        // when ViewBag.HasCrsCreator == true.
        $(document).on('click', '.hm-pick-crs-creator', function (e) {
            e.preventDefault();
            var btn = this;
            var url = btn.getAttribute('data-picker-url');
            var targetId = btn.getAttribute('data-target');
            window.open(url, 'CrsHmMediaPicker', 'width=1100,height=820,scrollbars=yes,resizable=yes');
            function onPicked(ev) {
                if (!ev.data || ev.data.type !== 'cc:media:picked') return;
                var ids = ev.data.ids || [];
                if (ids.length === 0) { window.removeEventListener('message', onPicked); return; }
                var newId = ids[0];

                // Locate the hidden input via id OR by name — name is canonical, id may
                // get mangled when Smartstore rewraps the editor in custom prefixes.
                var inp = document.getElementById(targetId)
                       || document.querySelector('[name="CustomProperties[hybridmenu].BgPictureId"]');
                if (!inp) {
                    console.warn('[HybridMenu] BgPictureId hidden input not found, picker result lost');
                    window.removeEventListener('message', onPicked);
                    return;
                }
                inp.value = newId;
                $(inp).trigger('change');

                // Refresh the live thumbnail. Smartstore renders the preview server-side
                // into `.fu-thumb` inside the surrounding `.fu-container` — without an
                // explicit refresh the user sees the OLD picture until reload. Use the
                // picked file's thumb-URL (or full URL fallback) the picker sent us.
                var files = ev.data.files || [];
                var thumbs = ev.data.thumbs || [];
                var thumbUrl = (files[0] && (files[0].thumbUrl || files[0].url)) || thumbs[0] || '';
                if (thumbUrl) {
                    var $fuThumb = $(inp).closest('.fu-container').find('.fu-thumb').first();
                    if ($fuThumb.length) {
                        $fuThumb.removeClass('empty').html('<img src="' + thumbUrl + '" alt="" />');
                    }
                }
                window.removeEventListener('message', onPicked);
            }
            window.addEventListener('message', onPicked);
        });
    });
</script>
