@extends('backend.layout.master-tailwind')
@section('title', __('All Widgets'))

@section('admin_styles')
<link rel="stylesheet" href="{{ asset('assets/backend/css/jquery-ui.min.css') }}">
<link rel="stylesheet" href="{{ asset('assets/frontend/css/all.min.css') }}">
<link rel="stylesheet" href="{{ asset('assets/backend/css/fontawesome-iconpicker.min.css') }}">
<x-media.css/>
<x-summernote.summernote-css/>
<style>
.widget-builder-grid {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 20px;
    align-items: start;
}

@@media (max-width: 900px) {
    .widget-builder-grid { grid-template-columns: 1fr; }
}

/* ── Palette ─────────────────────────────────────── */
#sortable_02 {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.widget-palette-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: grab;
    user-select: none;
    color: var(--text);
}

.widget-palette-item:hover {
    background: var(--hover);
    border-color: var(--border-strong);
}

.widget-palette-item.ui-sortable-helper {
    cursor: grabbing;
    box-shadow: 0 4px 16px rgba(0,0,0,.15);
    opacity: .9;
}

/* ── Sidebar areas ──────────────────────────────── */
.widget-area-section {
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 12px;
    /* no overflow:hidden — that would clip the iconpicker popup */
}

.widget-area-section > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--surface);
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    list-style: none;
    user-select: none;
    border-radius: 8px;
}

.widget-area-section[open] > summary {
    border-radius: 8px 8px 0 0;
    border-bottom: 1px solid var(--border);
}

.widget-area-section > summary::-webkit-details-marker { display: none; }

.widget-area-section > summary .toggle-icon {
    transition: transform .2s;
    flex-shrink: 0;
    color: var(--text-2);
}

.widget-area-section[open] > summary .toggle-icon {
    transform: rotate(180deg);
}

.widget-area-body {
    padding: 12px;
    background: var(--surface-2);
    border-radius: 0 0 8px 8px;
}

.sortable_widget_location {
    list-style: none;
    padding: 0;
    margin: 0;
    min-height: 40px;
}

/* ── Widget handler items ───────────────────────── */
.widget-handler {
    position: relative;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    margin-bottom: 8px;
}

.widget-top-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 76px 10px 12px;
    cursor: move;
    min-height: 44px;
}

.widget-title {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
}

.widget-handler .expand,
.widget-handler .remove-widget {
    position: absolute;
    top: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    cursor: pointer;
}

.widget-handler .expand {
    right: 40px;
    color: var(--text-2);
}

.widget-handler .expand:hover { background: var(--hover); }

.widget-handler .expand .toggle-icon { transition: transform .2s; }
.widget-handler.open .expand .toggle-icon { transform: rotate(180deg); }

.widget-handler .remove-widget {
    right: 8px;
    color: var(--danger, #ef4444);
}

.widget-handler .remove-widget:hover {
    background: rgba(239,68,68,.08);
}

/* ── Collapsible content ────────────────────────── */
.widget-handler .content-part {
    display: none;
    border-top: 1px solid var(--border);
    padding: 16px;
    background: var(--surface-2);
    border-radius: 0 0 8px 8px;
}

.widget-handler .content-part.show { display: block; }

/* ── Form controls inside widgets ───────────────── */
.content-part .form-group { margin-bottom: 12px; }
.content-part .all-field-wrap .form-group:last-child { margin-bottom: 0; }

.content-part .form-group > label,
.content-part label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-2);
    margin-bottom: 4px;
}

.content-part .form-control,
.content-part input[type="text"],
.content-part input[type="email"],
.content-part input[type="url"],
.content-part input[type="number"],
.content-part textarea,
.content-part select {
    display: block;
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg);
    color: var(--text);
    font-size: 13px;
    line-height: 1.5;
    box-sizing: border-box;
}

.content-part input:focus,
.content-part textarea:focus,
.content-part select:focus {
    outline: none;
    border-color: var(--accent);
}

/* ── Icon picker button ─────────────────────────── */
.icon-pick-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    font-size: 13px;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
}

.icon-pick-btn:hover {
    background: var(--hover);
    border-color: var(--border-strong);
}

.icon-pick-btn i { font-size: 16px; min-width: 16px; }
.icon-pick-label { color: var(--text-2); }

/* Iconpicker popup theme */
.iconpicker-popover.popover {
    z-index: 9999 !important;
    border-radius: 8px;
    border: 1px solid var(--border) !important;
    background: var(--bg-elev, #fff) !important;
}

.iconpicker-popover .popover-title { background: var(--surface) !important; border-color: var(--border) !important; }
.iconpicker-popover .popover-footer { background: var(--surface) !important; border-color: var(--border) !important; }
.iconpicker-popover .popover-title input { background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: 4px 8px; width: 100%; box-sizing: border-box; }
.iconpicker .iconpicker-items { background: var(--bg-elev, #fff) !important; }
.iconpicker .iconpicker-item { color: var(--text) !important; box-shadow: 0 0 0 1px var(--border) !important; }
.iconpicker .iconpicker-item:hover { background: var(--hover) !important; }
.iconpicker .iconpicker-item.iconpicker-selected { background: var(--accent) !important; box-shadow: none !important; }

/* ── Repeater fields ────────────────────────────── */
.iconbox-repeater-wrapper { margin-top: 8px; }

.all-field-wrap {
    position: relative;
    padding: 12px 52px 12px 0;
    border-bottom: 1px solid var(--border);
    box-sizing: border-box;
}

.all-field-wrap:last-child { border-bottom: none; }

.all-field-wrap .action-wrap {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.all-field-wrap .action-wrap .add,
.all-field-wrap .action-wrap .remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    flex-shrink: 0;
    line-height: 1;
    border: none;
}

.all-field-wrap .action-wrap .add { background: var(--success, #22c55e); }
.all-field-wrap .action-wrap .remove { background: var(--danger, #ef4444); }

/* ── jQuery UI placeholder ──────────────────────── */
.ui-sortable-placeholder {
    border: 2px dashed var(--border-strong);
    border-radius: 8px;
    background: var(--surface-2);
    min-height: 44px;
    margin-bottom: 8px;
    visibility: visible !important;
}

/* ── Summernote ─────────────────────────────────── */
.note-editor.note-frame { border: 1px solid var(--border) !important; }

.widget-builder-notice { display: none; }
@@media (max-width: 1024px) {
    .widget-builder-notice { display: flex; }
}
</style>
@endsection

@section('content')
<div class="page">
    <div class="page-head">
        <div>
            <h1 class="page-title">{{ __('All Widgets') }}</h1>
            <p class="page-sub">{{ __('Drag widgets from the palette into a sidebar area to add them.') }}</p>
        </div>
    </div>

    <div class="widget-builder-notice" style="gap:10px;align-items:flex-start;background:color-mix(in oklch,var(--warning,#f59e0b) 10%,transparent);border:1px solid color-mix(in oklch,var(--warning,#f59e0b) 35%,transparent);border-radius:10px;padding:12px 16px;margin-bottom:20px;font-size:13px;color:var(--text-2)">
        <svg class="icon" style="flex:none;color:var(--warning,#f59e0b);margin-top:1px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
        <div>
            <div style="font-weight:600;margin-bottom:3px">{{ __('Desktop recommended') }}</div>
            {{ __('The widget builder uses drag-and-drop to add and reorder widgets into sidebar areas. This works best on a PC or desktop browser — touch drag may not function correctly on mobile.') }}
        </div>
    </div>

    <div class="widget-builder-grid">
        {{-- Left: Widget Palette --}}
        <div>
            <div class="card">
                <div class="card-head">
                    <div class="card-title">{{ __('Available Widgets') }}</div>
                    <p style="font-size:12px;color:var(--text-3);margin:0">{{ __('Drag into a sidebar to add.') }}</p>
                </div>
                <div class="card-body">
                    <ul id="sortable_02" class="sortable_02">
                        {!! render_admin_panel_widgets_list() !!}
                    </ul>
                </div>
            </div>
        </div>

        {{-- Right: Sidebar Areas --}}
        <div class="sidebar-list-wrap">
            {!! get_admin_sidebar_list() !!}
        </div>
    </div>

    <x-media.markup/>
</div>
@endsection

@section('script')
<script src="{{ asset('assets/backend/js/jquery-ui.min.js') }}"></script>
<script src="{{ asset('assets/backend/js/fontawesome-iconpicker.min.js') }}"></script>
<x-media.js/>
<x-summernote.summernote-js/>
<x-backend.all-widgets-js/>
<script>
(function ($) {
    'use strict';

    function initIconPickers(ctx) {
        $(ctx || document).find('.icp-dd').each(function () {
            if (!$(this).data('iconpicker')) {
                $(this).iconpicker();
            }
        });
    }

    $(document).ready(function () {
        initIconPickers();

        // When icon selected: update button preview + hidden form input
        $('body').on('iconpickerSelected', '.icp-dd', function (e) {
            var val = e.iconpickerValue;
            var $group = $(this).closest('.form-group');
            $group.find('.iconpicker-component i').attr('class', val);
            $group.find('.icon-val').val(val);
        });

        // Override expand handler — toggle .open for CSS chevron rotation
        $('body').off('click', '.expand').on('click', '.expand', function () {
            var $li = $(this).parent();
            $li.find('.content-part').toggleClass('show');
            $li.toggleClass('open');
            initIconPickers($li[0]);
        });

        // Collapse widget bodies when a sidebar area closes natively
        $(document).on('toggle', '.widget-area-section', function () {
            if (!$(this).prop('open')) {
                $(this).find('.widget-handler').removeClass('open');
                $(this).find('.content-part').removeClass('show');
            }
        });
    });
}(jQuery));
</script>
@endsection