@extends('layouts.adminlte')

@section('title', 'Dashboard')
@section('page_title', 'Dashboard')

@push('styles')
    <style>
        .dash-mini-bars .label { width: 160px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .dash-mini-bars .bar { height: 10px; background: #eef2f7; border-radius: 999px; overflow: hidden; }
        .dash-mini-bars .bar > span { display: block; height: 100%; border-radius: 999px; }
        .dash-mini-bars .value { width: 64px; text-align: right; font-variant-numeric: tabular-nums; }
        .dash-vbars {
            --bar-w: clamp(6px, 0.9vw, 10px);
            height: 180px;
            display: flex;
            align-items: flex-end;
            gap: 4px;
            overflow-x: auto;
            padding-bottom: 4px;
        }
        .dash-vbars .bar {
            position: relative;
            flex: 0 0 var(--bar-w);
            width: var(--bar-w);
            max-width: var(--bar-w);
            min-width: var(--bar-w);
            height: 100%;
            background: #e5e7eb;
            border-radius: 4px 4px 0 0;
            display: flex;
            flex-direction: column-reverse;
        }
        .dash-vbars .bar > span { display: block; width: 100%; border-radius: 4px 4px 0 0; }
        .dash-vbars .bar.has-ref { background: transparent; }
        .dash-vbars .bar.has-ref::before {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: var(--ref-height, 0%);
            background: #e5e7eb;
            border-radius: 4px 4px 0 0;
            z-index: 0;
        }
        .dash-vbars .bar.has-ref > span { position: relative; z-index: 1; }
        .dash-vbars .bar-label {
            position: absolute;
            bottom: calc(100% + 2px);
            left: 50%;
            transform: translateX(-50%);
            font-size: 10px;
            color: #6b7280;
            font-style: italic;
            white-space: nowrap;
            font-variant-numeric: tabular-nums;
        }
        .dash-bar-click { cursor: pointer; }
        .dash-bar-click:hover { outline: 2px solid rgba(13,110,253,.35); outline-offset: 1px; }
        .dash-legend .item { display: inline-flex; align-items: center; gap: 6px; margin-right: 12px; }
        .dash-legend .swatch { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
        .dash-linechart {
            height: 80px;
            width: 100%;
        }
        .dash-linechart svg {
            width: 100%;
            height: 100%;
            display: block;
        }
        .dash-linechart .line-path {
            fill: none;
            stroke: #8b5cf6;
            stroke-width: 2;
        }
        .dash-linechart .line-point {
            fill: #8b5cf6;
        }
        .dash-linechart .line-label {
            font-size: 6px;
            fill: #6b7280;
            font-style: italic;
            text-anchor: middle;
        }
        .widget-handle {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 2px 8px;
            border: 1px solid #d1d5db;
            border-radius: 6px;
            background: #f8fafc;
            cursor: grab;
        }

        /* Give the attendance chart more vertical space (matches the denser bars). */
        .dashboard-widget {
            position: relative;
        }
        #dashboardWidgets.builder-mode .widget-handle {
            display: none;
        }
        .widget-toolbar {
            position: absolute;
            top: 8px;
            right: 8px;
            z-index: 5;
            display: inline-flex;
            gap: 6px;
        }
        .widget-drag-handle {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            border: 1px dashed rgba(15, 23, 42, 0.2);
            background: rgba(248, 250, 252, 0.95);
            color: #334155;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: grab;
        }
        .widget-delete-btn {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            border: 1px solid rgba(220, 53, 69, 0.35);
            color: #b91c1c;
            background: #fff;
        }
        .widget-delete-btn:hover {
            background: #fee2e2;
            color: #991b1b;
        }
        .dashboard-widget .card-header {
            cursor: default;
        }
        #dashboardWidgets.builder-mode .dashboard-row-drop {
            min-height: 80px;
            padding: 8px;
            border: 1px dashed #cbd5e1;
            border-radius: 8px;
            background: #fafafa;
        }
        #dashboardWidgets.builder-mode .row-empty-hint {
            pointer-events: none;
        }
        .trash-widget-card.collapsed #widgetTrashContent {
            display: none;
        }
        .trash-widget-card .btn-trash-toggle {
            border: 1px solid #f1aeb5;
            color: #b02a37;
            background: #fff;
        }
        .trash-widget-card .btn-trash-toggle:hover {
            background: #f8d7da;
        }
    </style>
    @include('dashboard.partials.attendance-style')
    @include('dashboard.partials.payroll-style')
@endpush

@section('content')
    @php
        $hideOnboardingForm = true;
    @endphp
    @if ($builderMode)
        <div class="alert alert-info d-flex flex-wrap align-items-center justify-content-between gap-2 py-2 mb-2">
            <div>
                <strong>Edit Dashboard Profile:</strong>
                {{ $profileEdit?->name ?? 'Profil baru' }}
                @if ($profileEdit?->scope_value)
                    <span class="badge text-bg-primary ms-1">{{ $profileEdit->scope_value }}</span>
                @endif
                @if ($profileEdit?->id)
                    <span class="text-muted small ms-1">ID #{{ $profileEdit->id }}</span>
                @endif
            </div>
            <a href="{{ route('dashboard_profile.index') }}" class="btn btn-outline-primary btn-sm">
                <i class="fas fa-arrow-left me-1"></i>Kembali ke Menu Widget
            </a>
        </div>
        <div class="d-flex justify-content-end gap-2 mb-2">
            @if (!empty($profileEdit?->id))
                <a
                    href="{{ route('dashboard_profile.preview', ['id' => $profileEdit->id]) }}"
                    target="_blank"
                    rel="noopener"
                    class="btn btn-outline-info btn-sm"
                >
                    <i class="fas fa-up-right-from-square me-1"></i>Preview Tab Baru
                </a>
            @else
                <button type="button" class="btn btn-outline-info btn-sm" disabled title="Simpan profil dulu agar bisa preview">
                    <i class="fas fa-up-right-from-square me-1"></i>Preview Tab Baru
                </button>
            @endif
            <button class="btn btn-outline-success btn-sm" id="btnSaveProfile">
                <i class="fas fa-floppy-disk me-1"></i>Simpan Profil
            </button>
            <button class="btn btn-outline-secondary btn-sm" id="btnAddRow">
                <i class="fas fa-layer-group me-1"></i>Tambah Row
            </button>
            <button class="btn btn-outline-primary btn-sm" id="btnManageWidgets">
                <i class="fas fa-plus me-1"></i>Tambah Widget
            </button>
        </div>
        <div class="card border-danger border-dashed mb-3 trash-widget-card" id="widgetTrashCard">
            <div class="card-body py-2">
                <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-2">
                    <div class="fw-semibold text-danger">
                        <i class="fas fa-trash me-1"></i>Trash Widget (drag widget ke sini untuk nonaktif)
                    </div>
                    <div class="d-flex align-items-center gap-2">
                        <span class="badge bg-danger" id="widgetTrashCount">0</span>
                        <button type="button" class="btn btn-sm btn-trash-toggle" id="btnTrashToggle">
                            <i class="fas fa-chevron-up me-1"></i>Minimize
                        </button>
                    </div>
                </div>
                <div id="widgetTrashContent">
                    <div
                        id="widgetTrashDrop"
                        class="border border-danger rounded p-2 text-muted small"
                        style="min-height: 44px; background: #fff7f7;"
                    >
                        Drop widget di area ini
                    </div>
                    <div id="widgetTrashList" class="mt-2 d-grid gap-2"></div>
                </div>
            </div>
        </div>
    @endif
    @if (!$hideOnboardingForm)
    <div class="d-flex justify-content-end align-items-center gap-2 mb-2">
        @if (!($onboardingState['is_completed'] ?? false))
            <div class="alert alert-warning py-1 px-2 mb-0">
                Setup awal belum selesai.
            </div>
        @endif
        <a href="{{ route('guides.index', ['section' => 'onboarding-dashboard']) }}" class="btn btn-outline-dark btn-sm" target="_blank" rel="noopener">
            <i class="fas fa-book me-1"></i>Guide Setup
        </a>
        <button class="btn btn-primary btn-sm" id="btnOpenOnboarding">
            <i class="fas fa-list-check me-1"></i>Step Form Awal
        </button>
    </div>
    @endif
    <div class="row g-3 {{ $builderMode ? 'builder-mode' : '' }}" id="dashboardWidgets">
        @include('dashboard.partials.attendance')
        @include('dashboard.partials.widgets')
    </div>
    <div class="row g-3 mt-1" id="dashboardRows"></div>

    @if ($builderMode)
        <div class="modal fade" id="widgetManagerModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Tambah Widget</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div id="widgetManagerList" class="d-grid gap-2"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" id="widgetManagerSave">Save</button>
                </div>
            </div>
        </div>
        </div>
    @endif

    @if ($builderMode)
        <div class="modal fade" id="profileSaveModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Simpan Profil Dashboard</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Nama Profil</label>
                        <input type="text" class="form-control" id="profileName" value="{{ $profileEdit?->name ?? 'Default' }}" />
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Profil Menu</label>
                        <select class="form-select" id="profileScopeMenuProfile">
                            <option value="">- Pilih Profil Menu -</option>
                            @foreach ($menuProfiles as $profile)
                                <option value="{{ $profile }}" {{ ($profileEdit?->scope_value ?? '') === $profile ? 'selected' : '' }}>{{ $profile }}</option>
                            @endforeach
                        </select>
                    </div>
                    <input type="hidden" id="profileScope" value="department" />
                    <input type="hidden" id="profileId" value="{{ $profileEdit?->id ?? '' }}" />
                    @if ($usingProfile)
                        <div class="alert alert-info py-2 mb-0">
                            Saat ini dashboard menggunakan profil. Menyimpan akan mengganti profil tersebut.
                        </div>
                    @endif
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-success" id="profileSaveBtn">Simpan Profil</button>
                </div>
            </div>
        </div>
        </div>
    @endif

    @if (!$hideOnboardingForm)
    <div class="modal fade" id="onboardingModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Step Form Setup Awal Program</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="small text-muted mb-2">
                        Isi data ini sebagai checklist implementasi awal. Bisa disimpan draft lalu dilanjutkan kapan saja.
                    </div>
                    <div class="progress mb-3" role="progressbar" aria-valuemin="0" aria-valuemax="100">
                        <div class="progress-bar" id="onboardingProgress" style="width: 33%">Langkah 1/3</div>
                    </div>

                    <div class="onboarding-step" data-step="1">
                        <h6 class="mb-3">Langkah 1 - Info Dasar</h6>
                        <div class="row g-2">
                            <div class="col-md-6">
                                <label class="form-label">Nama Perusahaan</label>
                                <input type="text" class="form-control" id="onbCompanyName" maxlength="160">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Fokus Department</label>
                                <input type="text" class="form-control" id="onbDepartmentFocus" placeholder="Contoh: HR & GA">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Mode Workflow</label>
                                <select class="form-select" id="onbWorkflowMode">
                                    <option value="">- Pilih Mode -</option>
                                    <option value="project">Project</option>
                                    <option value="hrga">HR & GA</option>
                                    <option value="hybrid">Hybrid</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Target Go Live</label>
                                <input type="date" class="form-control" id="onbGoLiveDate">
                            </div>
                        </div>
                    </div>

                    <div class="onboarding-step d-none" data-step="2">
                        <h6 class="mb-3">Langkah 2 - Checklist Implementasi</h6>
                        <div class="form-check mb-2">
                            <input class="form-check-input" type="checkbox" value="1" id="onbSetupMasterData">
                            <label class="form-check-label" for="onbSetupMasterData">
                                Master data (satuan, jabatan, area, gudang, vendor, customer) sudah siap
                            </label>
                        </div>
                        <div class="form-check mb-2">
                            <input class="form-check-input" type="checkbox" value="1" id="onbSetupApproval">
                            <label class="form-check-label" for="onbSetupApproval">
                                Alur approval (leave, lembur, forgetting clock) sudah diset
                            </label>
                        </div>
                        <div class="form-check mb-2">
                            <input class="form-check-input" type="checkbox" value="1" id="onbSetupAttendance">
                            <label class="form-check-label" for="onbSetupAttendance">
                                Integrasi attendance / import log sudah diuji
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="1" id="onbSetupPayroll">
                            <label class="form-check-label" for="onbSetupPayroll">
                                Profil gaji, komponen, dan penggajian dinamis sudah disiapkan
                            </label>
                        </div>
                    </div>

                    <div class="onboarding-step d-none" data-step="3">
                        <h6 class="mb-3">Langkah 3 - Catatan dan Finalisasi</h6>
                        <div class="mb-2">
                            <label class="form-label">Catatan Implementasi</label>
                            <textarea class="form-control" id="onbNotes" rows="5" maxlength="1200" placeholder="Contoh: masih menunggu data fingerprint cabang, flow approval finance belum final."></textarea>
                        </div>
                        <div class="alert alert-info py-2 mb-0">
                            Jika klik <b>Selesai Setup</b>, modal awal tidak muncul otomatis lagi di dashboard user ini.
                        </div>
                    </div>
                </div>
                <div class="modal-footer d-flex justify-content-between">
                    <div>
                        <button type="button" class="btn btn-outline-secondary btn-sm" id="onboardingPrev">Kembali</button>
                        <button type="button" class="btn btn-outline-primary btn-sm" id="onboardingNext">Lanjut</button>
                    </div>
                    <div class="d-flex gap-2">
                        <button type="button" class="btn btn-outline-dark btn-sm" id="onboardingSaveDraft">Simpan Draft</button>
                        <button type="button" class="btn btn-success btn-sm" id="onboardingComplete">Selesai Setup</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif
@endsection

@push('scripts')
    @include('dashboard.partials.payroll-script')
    @include('dashboard.partials.attendance-script')
@endpush

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const filter = document.getElementById('moduleDeptFilter');
            const rows = Array.from(document.querySelectorAll('#moduleTable tbody tr'));
            if (!filter) return;
            filter.addEventListener('change', function () {
                const value = this.value;
                rows.forEach((row) => {
                    const dept = row.getAttribute('data-department') || '';
                    row.style.display = value === '' || dept === value ? '' : 'none';
                });
            });
        });
    </script>
@endpush

@push('scripts')
    <script src="{{ asset('vendor/sortablejs/Sortable.min.js') }}"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const container = document.getElementById('dashboardWidgets');
            const rowContainer = document.getElementById('dashboardRows');
            if (!container) return;
            @if (!$hideOnboardingForm)
            const onboardingState = @json($onboardingState ?? ['is_completed' => false, 'form' => []]);
            const onboardingModalEl = document.getElementById('onboardingModal');
            const onboardingModal = onboardingModalEl ? new bootstrap.Modal(onboardingModalEl) : null;
            const onboardingSteps = Array.from(document.querySelectorAll('.onboarding-step'));
            const onboardingProgress = document.getElementById('onboardingProgress');
            const onbCompanyName = document.getElementById('onbCompanyName');
            const onbDepartmentFocus = document.getElementById('onbDepartmentFocus');
            const onbWorkflowMode = document.getElementById('onbWorkflowMode');
            const onbGoLiveDate = document.getElementById('onbGoLiveDate');
            const onbSetupMasterData = document.getElementById('onbSetupMasterData');
            const onbSetupApproval = document.getElementById('onbSetupApproval');
            const onbSetupAttendance = document.getElementById('onbSetupAttendance');
            const onbSetupPayroll = document.getElementById('onbSetupPayroll');
            const onbNotes = document.getElementById('onbNotes');
            const btnOpenOnboarding = document.getElementById('btnOpenOnboarding');
            const btnOnboardingPrev = document.getElementById('onboardingPrev');
            const btnOnboardingNext = document.getElementById('onboardingNext');
            const btnOnboardingSaveDraft = document.getElementById('onboardingSaveDraft');
            const btnOnboardingComplete = document.getElementById('onboardingComplete');
            let onboardingStepCurrent = 1;

            const onboardingForm = onboardingState && typeof onboardingState === 'object' && onboardingState.form
                ? onboardingState.form
                : {};
            if (onbCompanyName) onbCompanyName.value = onboardingForm.company_name || '';
            if (onbDepartmentFocus) onbDepartmentFocus.value = onboardingForm.department_focus || '';
            if (onbWorkflowMode) onbWorkflowMode.value = onboardingForm.workflow_mode || '';
            if (onbGoLiveDate) onbGoLiveDate.value = onboardingForm.go_live_date || '';
            if (onbSetupMasterData) onbSetupMasterData.checked = !!onboardingForm.setup_master_data;
            if (onbSetupApproval) onbSetupApproval.checked = !!onboardingForm.setup_approval;
            if (onbSetupAttendance) onbSetupAttendance.checked = !!onboardingForm.setup_attendance;
            if (onbSetupPayroll) onbSetupPayroll.checked = !!onboardingForm.setup_payroll;
            if (onbNotes) onbNotes.value = onboardingForm.notes || '';

            const renderOnboardingStep = () => {
                onboardingSteps.forEach((el) => {
                    const step = Number(el.dataset.step || 1);
                    el.classList.toggle('d-none', step !== onboardingStepCurrent);
                });
                if (onboardingProgress) {
                    const percent = Math.max(1, Math.min(3, onboardingStepCurrent)) * 33;
                    onboardingProgress.style.width = `${percent}%`;
                    onboardingProgress.textContent = `Langkah ${onboardingStepCurrent}/3`;
                }
                if (btnOnboardingPrev) btnOnboardingPrev.disabled = onboardingStepCurrent === 1;
                if (btnOnboardingNext) btnOnboardingNext.disabled = onboardingStepCurrent === 3;
            };

            const collectOnboardingPayload = (completed) => ({
                company_name: onbCompanyName?.value || '',
                department_focus: onbDepartmentFocus?.value || '',
                workflow_mode: onbWorkflowMode?.value || '',
                go_live_date: onbGoLiveDate?.value || '',
                setup_master_data: !!onbSetupMasterData?.checked,
                setup_approval: !!onbSetupApproval?.checked,
                setup_attendance: !!onbSetupAttendance?.checked,
                setup_payroll: !!onbSetupPayroll?.checked,
                notes: onbNotes?.value || '',
                is_completed: completed,
            });

            const saveOnboarding = (completed) => {
                return fetch('{{ route('dashboard.onboarding.save') }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                        'Accept': 'application/json',
                    },
                    body: JSON.stringify(collectOnboardingPayload(completed)),
                })
                .then((resp) => resp.json())
                .then((data) => {
                    if (data?.message) {
                        Swal.fire('Sukses', data.message, 'success');
                    }
                    if (completed) {
                        if (onboardingModal) onboardingModal.hide();
                        setTimeout(() => window.location.reload(), 500);
                    }
                })
                .catch(() => {
                    Swal.fire('Error', 'Gagal simpan step form awal.', 'error');
                });
            };

            renderOnboardingStep();

            if (btnOpenOnboarding && onboardingModal) {
                btnOpenOnboarding.addEventListener('click', () => {
                    onboardingStepCurrent = 1;
                    renderOnboardingStep();
                    onboardingModal.show();
                });
            }
            if (btnOnboardingPrev) {
                btnOnboardingPrev.addEventListener('click', () => {
                    onboardingStepCurrent = Math.max(1, onboardingStepCurrent - 1);
                    renderOnboardingStep();
                });
            }
            if (btnOnboardingNext) {
                btnOnboardingNext.addEventListener('click', () => {
                    onboardingStepCurrent = Math.min(3, onboardingStepCurrent + 1);
                    renderOnboardingStep();
                });
            }
            if (btnOnboardingSaveDraft) {
                btnOnboardingSaveDraft.addEventListener('click', () => saveOnboarding(false));
            }
            if (btnOnboardingComplete) {
                btnOnboardingComplete.addEventListener('click', () => saveOnboarding(true));
            }

            if (!(onboardingState?.is_completed) && onboardingModal) {
                setTimeout(() => onboardingModal.show(), 450);
            }
            @endif

            const savedOrder = @json($widgetOrder ?? []);
            const savedSizes = @json($widgetSizes ?? []);
            const savedEnabled = @json($widgetEnabled ?? []);
            const savedRows = @json($widgetRows ?? []);
            const savedRowWidgets = @json($widgetRowWidgets ?? []);
            const widgetConfigLoaded = @json($widgetConfigLoaded ?? false);

            const applySize = (el, sizeClass) => {
                if (!el || !sizeClass) return;
                Array.from(el.classList).forEach((cls) => {
                    if (cls === 'col' || cls.startsWith('col-')) {
                        el.classList.remove(cls);
                    }
                });
                sizeClass.split(' ').forEach((cls) => {
                    if (cls) el.classList.add(cls);
                });
                el.dataset.widgetSize = sizeClass;
                const select = el.querySelector('.widget-size-select');
                if (select) {
                    select.value = sizeClass;
                }
            };

            const orderedWidgetIds = Array.isArray(savedOrder)
                ? ['chart_attendance', ...savedOrder.filter((id) => id !== 'chart_attendance')]
                : [];

            if (orderedWidgetIds.length) {
                const items = Array.from(container.querySelectorAll('.dashboard-widget'));
                const map = new Map(items.map((el) => [el.dataset.widgetId, el]));
                orderedWidgetIds.forEach((id) => {
                    const el = map.get(id);
                    if (el) {
                        container.appendChild(el);
                    }
                });
            }

            if (savedSizes && typeof savedSizes === 'object') {
                Array.from(document.querySelectorAll('.dashboard-widget')).forEach((el) => {
                    const id = el.dataset.widgetId;
                    if (id && savedSizes[id]) {
                        applySize(el, savedSizes[id]);
                    }
                });
            }

            const enabledSet = new Set(Array.isArray(savedEnabled) ? savedEnabled : []);
            if (widgetConfigLoaded) {
                Array.from(document.querySelectorAll('.dashboard-widget')).forEach((el) => {
                    const id = el.dataset.widgetId;
                    el.classList.toggle('d-none', !!id && !enabledSet.has(id));
                });
            }

            const modalEl = document.getElementById('widgetManagerModal');
            const modal = modalEl ? new bootstrap.Modal(modalEl) : null;
            const openBtn = document.getElementById('btnManageWidgets');
            const listEl = document.getElementById('widgetManagerList');
            const saveBtn = document.getElementById('widgetManagerSave');
            const addRowBtn = document.getElementById('btnAddRow');
            const saveProfileBtn = document.getElementById('btnSaveProfile');
            const profileModalEl = document.getElementById('profileSaveModal');
            const profileModal = profileModalEl ? new bootstrap.Modal(profileModalEl) : null;
            const profileSaveBtn = document.getElementById('profileSaveBtn');
            const profileIdInput = document.getElementById('profileId');
            const trashDrop = document.getElementById('widgetTrashDrop');
            const trashList = document.getElementById('widgetTrashList');
            const trashCount = document.getElementById('widgetTrashCount');
            const trashCard = document.getElementById('widgetTrashCard');
            const trashToggleBtn = document.getElementById('btnTrashToggle');
            const isBuilder = @json($builderMode);

            // === Widget menu filter: hide widgets not accessible to profile's role ===
            const widgetMenuMap = @json($widgetMenuMap ?? []);
            const profileMenuName = '{{ $profileEdit?->scope_value ?? "" }}';
            if (profileMenuName && !isBuilder) {
                const pmLower = profileMenuName.toLowerCase();
                Array.from(document.querySelectorAll('.dashboard-widget')).forEach((el) => {
                    const menus = (el.dataset.widgetMenus || '').split(',').map(s => s.trim().toLowerCase()).filter(Boolean);
                    if (menus.length > 0 && !menus.some((m) => pmLower.includes(m))) {
                        el.classList.add('d-none');
                    }
                });
            }

            const getRowsPayload = () => {
                if (!rowContainer) return [];
                return Array.from(document.querySelectorAll('.dashboard-row'))
                    .map((el) => ({
                        id: el.dataset.rowId || '',
                        parent: el.dataset.rowParent || '',
                        size: el.dataset.rowSize || '',
                        title_size: (el.querySelector('.row-title-size')?.value || el.dataset.rowTitleSize || 'md').trim(),
                        title_icon: (el.querySelector('.row-title-icon')?.value || el.dataset.rowTitleIcon || '').trim(),
                        name: (el.querySelector('.row-name-input')?.value || el.dataset.rowName || '').trim(),
                    }))
                    .filter((row) => row.id);
            };

            const getRowWidgetsPayload = () => {
                if (!rowContainer) return {};
                const map = {};
                rowContainer.querySelectorAll('.dashboard-row-drop').forEach((drop) => {
                    const rowId = drop.dataset.rowId;
                    if (!rowId) return;
                    map[rowId] = Array.from(drop.querySelectorAll('.dashboard-widget'))
                        .map((el) => el.dataset.widgetId)
                        .filter(Boolean);
                });
                return map;
            };

            const getAllWidgets = () => Array.from(document.querySelectorAll('.dashboard-widget'));

            const saveWidgetState = () => {
                const order = Array.from(container.querySelectorAll('.dashboard-widget'))
                    .map((el) => el.dataset.widgetId)
                    .filter(Boolean);
                const sizes = {};
                getAllWidgets().forEach((el) => {
                    if (el.dataset.widgetId && el.dataset.widgetSize) {
                        sizes[el.dataset.widgetId] = el.dataset.widgetSize;
                    }
                });
                const enabled = getEnabledIds();
                const rows = getRowsPayload();
                const rowWidgets = getRowWidgetsPayload();
                fetch('{{ route('dashboard.widgets.update') }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                        'Accept': 'application/json',
                    },
                    body: JSON.stringify({ order, sizes, enabled, rows, row_widgets: rowWidgets }),
                }).catch(() => {});
            };

            const getEnabledIds = () => getAllWidgets()
                .filter((el) => !el.classList.contains('d-none'))
                .map((el) => el.dataset.widgetId)
                .filter(Boolean);

            const renderTrashWidgets = () => {
                if (!trashList) return;
                const trashed = getAllWidgets().filter((el) => el.classList.contains('d-none'));
                if (trashCount) {
                    trashCount.textContent = String(trashed.length);
                }
                trashList.innerHTML = '';
                if (!trashed.length) {
                    const empty = document.createElement('div');
                    empty.className = 'text-muted small';
                    empty.textContent = 'Tidak ada widget di trash.';
                    trashList.appendChild(empty);
                    return;
                }
                trashed.forEach((el) => {
                    const id = el.dataset.widgetId;
                    if (!id) return;
                    const label = el.dataset.widgetLabel || id;
                    const row = document.createElement('div');
                    row.className = 'd-flex flex-wrap align-items-center justify-content-between gap-2 border rounded p-2 bg-light';
                    row.innerHTML = `
                        <span class="small">${label}</span>
                        <button type="button" class="btn btn-outline-success btn-sm btn-trash-restore" data-widget-id="${id}">
                            <i class="fas fa-rotate-left me-1"></i>Aktifkan
                        </button>
                    `;
                    trashList.appendChild(row);
                });
            };

            const addWidgetDeleteButtons = () => {
                if (!isBuilder) return;
                document.querySelectorAll('.dashboard-widget').forEach((widget) => {
                    if (widget.querySelector('.btn-widget-delete')) return;
                    let toolbar = widget.querySelector('.widget-toolbar');
                    if (!toolbar) {
                        toolbar = document.createElement('div');
                        toolbar.className = 'widget-toolbar';
                        widget.appendChild(toolbar);
                    }
                    if (!toolbar.querySelector('.widget-drag-handle')) {
                        const dragBtn = document.createElement('button');
                        dragBtn.type = 'button';
                        dragBtn.className = 'btn btn-sm widget-drag-handle';
                        dragBtn.innerHTML = '<i class="fas fa-grip-vertical"></i>';
                        dragBtn.title = 'Drag widget';
                        toolbar.appendChild(dragBtn);
                    }
                    const btn = document.createElement('button');
                    btn.type = 'button';
                    btn.className = 'btn btn-sm widget-delete-btn btn-widget-delete';
                    btn.innerHTML = '<i class="fas fa-trash"></i>';
                    btn.title = 'Sembunyikan widget';
                    toolbar.appendChild(btn);
                });
            };

            const renderWidgetManager = () => {
                if (!listEl) return;
                listEl.innerHTML = '';
                const enabledIds = new Set(getEnabledIds());
                const widgets = getAllWidgets();
                widgets.forEach((el) => {
                    const id = el.dataset.widgetId;
                    const label = el.dataset.widgetLabel || id;
                    const wrapper = document.createElement('label');
                    wrapper.className = 'd-flex align-items-center gap-2 border rounded p-2';
                    const checkbox = document.createElement('input');
                    checkbox.type = 'checkbox';
                    checkbox.className = 'form-check-input m-0';
                    checkbox.checked = enabledIds.has(id);
                    checkbox.dataset.widgetId = id;
                    const text = document.createElement('span');
                    text.textContent = label;
                    wrapper.appendChild(checkbox);
                    wrapper.appendChild(text);
                    listEl.appendChild(wrapper);
                });
            };

            if (isBuilder && openBtn && modal) {
                openBtn.addEventListener('click', () => {
                    renderWidgetManager();
                    modal.show();
                });
            }

            if (isBuilder) {
                addWidgetDeleteButtons();
                document.addEventListener('click', (event) => {
                    const btn = event.target.closest('.btn-widget-delete');
                    if (!btn) return;
                    const widget = btn.closest('.dashboard-widget');
                    if (!widget) return;
                    widget.classList.add('d-none');
                    renderTrashWidgets();
                    saveWidgetState();
                });
            }

            const buildRow = (rowId, parentId = '', sizeClass = 'col-12', rowName = '', titleSize = 'md', titleIcon = '') => {
                const shortLabel = rowId.replace('row_', '').slice(-6);
                const displayName = rowName || `Row ${shortLabel}`;
                const titleClass = titleSize === 'sm'
                    ? 'small text-muted'
                    : (titleSize === 'lg' ? 'fs-5 fw-semibold' : '');
                const iconValue = titleIcon || '';
                const iconOptions = [
                    { value: '', label: 'No Icon' },
                    { value: 'fas fa-layer-group', label: 'Layers' },
                    { value: 'fas fa-chart-line', label: 'Chart' },
                    { value: 'fas fa-gauge-high', label: 'Gauge' },
                    { value: 'fas fa-bolt', label: 'Bolt' },
                    { value: 'fas fa-users', label: 'Users' },
                    { value: 'fas fa-user-shield', label: 'Shield' },
                    { value: 'fas fa-clipboard-list', label: 'List' },
                    { value: 'fas fa-building', label: 'Building' },
                    { value: 'fas fa-sitemap', label: 'Sitemap' },
                    { value: 'fas fa-bullhorn', label: 'Announcement' },
                    { value: 'fas fa-gear', label: 'Settings' },
                ];
                const iconSelectOptions = iconOptions.map((opt) => {
                    const selected = opt.value === iconValue ? 'selected' : '';
                    return `<option value="${opt.value}" ${selected}>${opt.label}</option>`;
                }).join('');
                const iconHtml = iconValue ? `<i class="${iconValue} me-1"></i>` : '';
                const row = document.createElement('div');
                row.className = `${sizeClass} dashboard-row`;
                row.dataset.rowId = rowId;
                row.dataset.rowParent = parentId;
                row.dataset.rowSize = sizeClass;
                row.dataset.rowName = displayName;
                row.dataset.rowTitleSize = titleSize;
                row.dataset.rowTitleIcon = iconValue;
                row.innerHTML = `
                    <div class="card border-dashed">
                        ${isBuilder ? `
                        <div class="card-header d-flex flex-wrap align-items-center gap-2">
                            <input type="text" class="form-control form-control-sm row-name-input" value="${displayName}" style="max-width:220px" />
                            <div class="ms-auto d-flex flex-wrap align-items-center gap-2">
                                <select class="form-select form-select-sm row-title-icon-select" style="min-width:150px">
                                    ${iconSelectOptions}
                                </select>
                                <input type="text" class="form-control form-control-sm row-title-icon" value="${iconValue}" placeholder="custom icon class" style="min-width:170px" />
                                <select class="form-select form-select-sm row-title-size" style="min-width:110px">
                                    <option value="sm" ${titleSize === 'sm' ? 'selected' : ''}>Title Small</option>
                                    <option value="md" ${titleSize === 'md' ? 'selected' : ''}>Title Normal</option>
                                    <option value="lg" ${titleSize === 'lg' ? 'selected' : ''}>Title Large</option>
                                </select>
                                <select class="form-select form-select-sm row-size-select" style="min-width:110px">
                                    <option value="col-12" ${sizeClass === 'col-12' ? 'selected' : ''}>Full</option>
                                    <option value="col-12 col-lg-6" ${sizeClass === 'col-12 col-lg-6' ? 'selected' : ''}>1/2</option>
                                    <option value="col-12 col-lg-4" ${sizeClass === 'col-12 col-lg-4' ? 'selected' : ''}>1/3</option>
                                </select>
                                <button type="button" class="btn btn-outline-secondary btn-sm btn-row-add" data-parent-id="${rowId}">Tambah Row</button>
                                <button type="button" class="btn btn-outline-danger btn-sm btn-row-delete" data-row-id="${rowId}">Delete</button>
                            </div>
                        </div>` : `
                        <div class="card-header py-2">
                            <span class="${titleClass}">${iconHtml}${displayName}</span>
                        </div>`}
                        <div class="card-body">
                            <div class="row g-3 dashboard-row-drop" data-row-id="${rowId}"></div>
                            ${isBuilder ? `<div class="text-muted text-center py-3 row-empty-hint">Row baru kosong. Tambahkan widget di sini.</div>` : ''}
                            <div class="row g-3 mt-2 dashboard-row-children" data-parent-id="${rowId}"></div>
                        </div>
                    </div>
                `;
                return row;
            };

            const buildRowsFromSaved = () => {
                if (!rowContainer || !Array.isArray(savedRows) || !savedRows.length) return;
                const rowsById = new Map();
                savedRows.forEach((row) => {
                    if (!row?.id) return;
                    const el = buildRow(
                        row.id,
                        row.parent || '',
                        row.size || 'col-12',
                        row.name || '',
                        row.title_size || 'md',
                        row.title_icon || ''
                    );
                    rowsById.set(row.id, el);
                });
                rowsById.forEach((el) => {
                    const parentId = el.dataset.rowParent || '';
                    if (parentId && rowsById.has(parentId)) {
                        const parentEl = rowsById.get(parentId);
                        const childrenWrap = parentEl.querySelector('.dashboard-row-children');
                        if (childrenWrap) {
                            childrenWrap.appendChild(el);
                        }
                    } else {
                        rowContainer.appendChild(el);
                    }
                });
            };

            buildRowsFromSaved();
            addWidgetDeleteButtons();

            if (rowContainer && savedRowWidgets && typeof savedRowWidgets === 'object') {
                Object.entries(savedRowWidgets).forEach(([rowId, widgetIds]) => {
                    const drop = rowContainer.querySelector(`.dashboard-row-drop[data-row-id="${rowId}"]`);
                    if (!drop || !Array.isArray(widgetIds)) return;
                    widgetIds.forEach((wid) => {
                        const el = container.querySelector(`.dashboard-widget[data-widget-id="${wid}"]`);
                        if (el) {
                            drop.appendChild(el);
                        }
                    });
                });
            }
            addWidgetDeleteButtons();

            if (isBuilder && addRowBtn && rowContainer) {
                addRowBtn.addEventListener('click', () => {
                    const rowId = `row_${Date.now()}`;
                    const rowEl = buildRow(rowId);
                    rowContainer.appendChild(rowEl);
                    const drop = rowEl.querySelector('.dashboard-row-drop');
                    initRowSortable(drop);
                    updateRowHints();
                    saveWidgetState();
                });
            }

            if (isBuilder && rowContainer) {
                rowContainer.addEventListener('click', (event) => {
                    const btn = event.target.closest('.btn-row-delete');
                    if (!btn) return;
                    const rowId = btn.dataset.rowId;
                    const row = rowContainer.querySelector(`.dashboard-row[data-row-id="${rowId}"]`);
                    if (row) {
                        const drop = row.querySelector('.dashboard-row-drop');
                        if (drop) {
                            Array.from(drop.querySelectorAll('.dashboard-widget')).forEach((el) => {
                                container.appendChild(el);
                            });
                        }
                        row.remove();
                        saveWidgetState();
                    }
                });
            }

            if (isBuilder && rowContainer) {
                rowContainer.addEventListener('click', (event) => {
                    const addBtn = event.target.closest('.btn-row-add');
                    if (!addBtn) return;
                    const parentId = addBtn.dataset.parentId;
                    const parentRow = rowContainer.querySelector(`.dashboard-row[data-row-id="${parentId}"]`);
                    if (!parentRow) return;
                    const childrenWrap = parentRow.querySelector('.dashboard-row-children');
                    if (!childrenWrap) return;
                    const rowId = `row_${Date.now()}`;
                    const rowEl = buildRow(rowId, parentId);
                    childrenWrap.appendChild(rowEl);
                    const drop = rowEl.querySelector('.dashboard-row-drop');
                    initRowSortable(drop);
                    updateRowHints();
                    saveWidgetState();
                });
            }

            if (isBuilder && rowContainer) {
                rowContainer.addEventListener('change', (event) => {
                    const select = event.target.closest('.row-size-select');
                    if (!select) return;
                    const row = select.closest('.dashboard-row');
                    if (!row) return;
                    const sizeClass = select.value;
                    const known = ['col-12', 'col-lg-6', 'col-lg-4'];
                    row.classList.remove(...known);
                    sizeClass.split(' ').forEach((cls) => row.classList.add(cls));
                    row.dataset.rowSize = sizeClass;
                    saveWidgetState();
                });
            }
            if (isBuilder && rowContainer) {
                rowContainer.addEventListener('change', (event) => {
                    const select = event.target.closest('.row-title-icon-select');
                    if (!select) return;
                    const row = select.closest('.dashboard-row');
                    if (!row) return;
                    const input = row.querySelector('.row-title-icon');
                    if (input) {
                        input.value = select.value;
                    }
                    row.dataset.rowTitleIcon = select.value.trim();
                    saveWidgetState();
                });
                rowContainer.addEventListener('change', (event) => {
                    const select = event.target.closest('.row-title-size');
                    if (!select) return;
                    const row = select.closest('.dashboard-row');
                    if (!row) return;
                    row.dataset.rowTitleSize = select.value;
                    saveWidgetState();
                });
            }
            if (isBuilder && rowContainer) {
                rowContainer.addEventListener('input', (event) => {
                    const input = event.target.closest('.row-title-icon');
                    if (!input) return;
                    const row = input.closest('.dashboard-row');
                    if (!row) return;
                    row.dataset.rowTitleIcon = input.value.trim();
                });
                rowContainer.addEventListener('blur', (event) => {
                    const input = event.target.closest('.row-title-icon');
                    if (!input) return;
                    const row = input.closest('.dashboard-row');
                    if (!row) return;
                    row.dataset.rowTitleIcon = input.value.trim();
                    saveWidgetState();
                }, true);
            }
            if (isBuilder && rowContainer) {
                rowContainer.addEventListener('input', (event) => {
                    const input = event.target.closest('.row-name-input');
                    if (!input) return;
                    const row = input.closest('.dashboard-row');
                    if (!row) return;
                    row.dataset.rowName = input.value.trim();
                });
                rowContainer.addEventListener('blur', (event) => {
                    const input = event.target.closest('.row-name-input');
                    if (!input) return;
                    const row = input.closest('.dashboard-row');
                    if (!row) return;
                    row.dataset.rowName = input.value.trim();
                    saveWidgetState();
                }, true);
            }

            if (isBuilder && saveBtn) {
                saveBtn.addEventListener('click', () => {
                    if (!listEl) return;
                    const selected = Array.from(listEl.querySelectorAll('input[type=\"checkbox\"]'))
                        .filter((input) => input.checked)
                        .map((input) => input.dataset.widgetId)
                        .filter(Boolean);
                    const selectedSet = new Set(selected);
                    getAllWidgets().forEach((el) => {
                        const id = el.dataset.widgetId;
                        el.classList.toggle('d-none', id && !selectedSet.has(id));
                    });
                    renderTrashWidgets();
                    saveWidgetState();
                    if (modal) modal.hide();
                });
            }

            const updateRowHints = () => {
                if (!rowContainer) return;
                rowContainer.querySelectorAll('.dashboard-row').forEach((row) => {
                    const drop = row.querySelector('.dashboard-row-drop');
                    const hint = row.querySelector('.row-empty-hint');
                    if (!drop || !hint) return;
                    hint.classList.toggle('d-none', drop.querySelectorAll('.dashboard-widget').length > 0);
                });
            };

            const initRowSortable = (drop) => {
                if (!drop) return;
                new Sortable(drop, {
                    group: { name: 'dashboard-widgets', pull: true, put: true },
                    animation: 150,
                    handle: '.widget-drag-handle',
                    filter: 'select, option, input, textarea, button:not(.widget-drag-handle):not(.btn-widget-delete), a',
                    preventOnFilter: false,
                    draggable: '.dashboard-widget',
                    fallbackTolerance: 6,
                    onEnd: function () {
                        updateRowHints();
                        saveWidgetState();
                    },
                    onAdd: function () {
                        updateRowHints();
                    },
                    onRemove: function () {
                        updateRowHints();
                    },
                });
            };

            if (isBuilder) {
                document.addEventListener('change', function (event) {
                    const target = event.target;
                    if (!(target instanceof HTMLSelectElement)) return;
                    if (!target.classList.contains('widget-size-select')) return;
                    const widget = target.closest('.dashboard-widget');
                    if (!widget) return;
                    applySize(widget, target.value);
                    saveWidgetState();
                });
            }

            if (isBuilder) {
                new Sortable(container, {
                    group: { name: 'dashboard-widgets', pull: true, put: true },
                    animation: 150,
                    handle: '.widget-drag-handle',
                    filter: 'select, option, input, textarea, button:not(.widget-drag-handle):not(.btn-widget-delete), a',
                    preventOnFilter: false,
                    draggable: '.dashboard-widget',
                    fallbackTolerance: 6,
                    onEnd: function () {
                        saveWidgetState();
                    },
                });
            }

            if (isBuilder && trashDrop) {
                new Sortable(trashDrop, {
                    group: { name: 'dashboard-widgets', pull: true, put: true },
                    animation: 150,
                    handle: '.widget-drag-handle',
                    draggable: '.dashboard-widget',
                    fallbackTolerance: 6,
                    onAdd: function (evt) {
                        const widget = evt.item;
                        if (!widget) return;
                        widget.classList.add('d-none');
                        container.appendChild(widget);
                        updateRowHints();
                        renderTrashWidgets();
                        saveWidgetState();
                    },
                });
            }

            if (isBuilder && rowContainer) {
                rowContainer.querySelectorAll('.dashboard-row-drop').forEach(initRowSortable);
            }

            updateRowHints();
            renderTrashWidgets();

            if (isBuilder && trashCard && trashToggleBtn) {
                const storageKey = 'dashboard_trash_minimized';
                const applyTrashState = (collapsed) => {
                    trashCard.classList.toggle('collapsed', collapsed);
                    trashToggleBtn.innerHTML = collapsed
                        ? '<i class="fas fa-chevron-down me-1"></i>Expand'
                        : '<i class="fas fa-chevron-up me-1"></i>Minimize';
                };
                applyTrashState(localStorage.getItem(storageKey) === '1');
                trashToggleBtn.addEventListener('click', () => {
                    const collapsed = !trashCard.classList.contains('collapsed');
                    applyTrashState(collapsed);
                    localStorage.setItem(storageKey, collapsed ? '1' : '0');
                });
            }

            if (isBuilder && trashList) {
                trashList.addEventListener('click', (event) => {
                    const btn = event.target.closest('.btn-trash-restore');
                    if (!btn) return;
                    const widgetId = btn.dataset.widgetId;
                    if (!widgetId) return;
                    const widget = container.querySelector(`.dashboard-widget[data-widget-id="${widgetId}"]`)
                        || document.querySelector(`.dashboard-widget[data-widget-id="${widgetId}"]`);
                    if (!widget) return;
                    widget.classList.remove('d-none');
                    container.appendChild(widget);
                    renderTrashWidgets();
                    saveWidgetState();
                });
            }

            if (isBuilder && saveProfileBtn && profileModal) {
                saveProfileBtn.addEventListener('click', () => {
                    profileModal.show();
                });
            }

            if (isBuilder && profileSaveBtn) {
                profileSaveBtn.addEventListener('click', () => {
                    const name = document.getElementById('profileName')?.value || 'Default';
                    const scope = 'department';
                    const scopeValue = document.getElementById('profileScopeMenuProfile')?.value || '';
                    const profileId = profileIdInput?.value || '';
                    if (!scopeValue && !profileId) {
                        Swal.fire('Error', 'Profil menu wajib diisi', 'error');
                        return;
                    }
                    const order = Array.from(container.querySelectorAll('.dashboard-widget'))
                        .map((el) => el.dataset.widgetId)
                        .filter(Boolean);
                    const sizes = {};
                    getAllWidgets().forEach((el) => {
                        if (el.dataset.widgetId && el.dataset.widgetSize) {
                            sizes[el.dataset.widgetId] = el.dataset.widgetSize;
                        }
                    });
                    const enabled = getEnabledIds();
                    const rows = getRowsPayload();
                    const rowWidgets = getRowWidgetsPayload();
                    fetch('{{ route('dashboard.profile.save') }}', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                            'Accept': 'application/json',
                        },
                        body: JSON.stringify({
                            name,
                            scope,
                            scope_value: scopeValue,
                            profile_id: profileId,
                            config: { order, sizes, enabled, rows, row_widgets: rowWidgets },
                        }),
                    })
                        .then((resp) => resp.json().then((data) => ({ ok: resp.ok, data })))
                        .then(({ ok, data }) => {
                            if (!ok) {
                                Swal.fire('Error', data?.message || 'Dashboard profile gagal disimpan', 'error');
                                return;
                            }
                            if (data?.message) {
                                toastr.success(data.message);
                            }
                            if (profileModal) profileModal.hide();
                        })
                        .catch(() => Swal.fire('Error', 'Dashboard profile gagal disimpan', 'error'));
                });
            }

        });
    </script>
@endpush