@extends('layouts.demo10.base')

@section('styles')
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<style>
    [x-cloak] { display: none !important; }


</style>
@endsection

@section('content')
<div
    class="flex flex-col gap-5 py-6"
    style="font-family: 'Manrope', sans-serif;"
     x-on:set-active-tab.window="activeTab = $event.detail.tab"  {{-- ← yeh add karein --}}
    x-data="{
       activeTab: '{{ request('tab', 'cochran') }}', 
        activeSampler: null,

        uploadedFileName: '',
        uploadedFileRows: 0,
        uploadedFileCols: 0,
        csvColumns: [],
        csvRows: [],
        selectedUuidColumn: '',
        selectedLevels: [],
        levelSlots: ['district', 'tehsil', 'uc', 'deh', 'village'],
        minCount: 1,
        defaultQuotaPerItem: 1,
        quotas: {},
        manualSamplingLoading: false,
        manualSamplingError: '',
        generalSearch: '',
        generalSearchSelection: null,
        availableLevelsOpen: false,
        activeDepthIndex: null,
        profileSearch: '',
        profileDropdownOpen: false,
        profiles: [],
        profilesLoading: false,
        profileSaving: false,
        selectedProfile: null,
        profileError: '',
        profileMessage: '',

        init() {
            if (Alpine.store('sampleSize') === undefined) {
                Alpine.store('sampleSize', null);
            }
            this.loadProfiles();
        },

        parseCsvLine(line) {
            const result = [];
            let current = '';
            let inQuotes = false;
            for (let i = 0; i < line.length; i++) {
                const char = line[i];
                if (char === '\x22' && line[i + 1] === '\x22' && inQuotes) {
                    current += '\x22';
                    i++;
                } else if (char === '\x22') {
                    inQuotes = !inQuotes;
                } else if (char === ',' && !inQuotes) {
                    result.push(current.trim());
                    current = '';
                } else {
                    current += char;
                }
            }
            result.push(current.trim());
            return result.map(val => val.replace(/\x22/g, ''));
        },

        get generalSearchResults() {
            const query = (this.generalSearch || '').trim().toLowerCase();
            if (!query || !this.csvRows.length || !this.csvColumns.length) return [];

            const groups = new Map();
            const maxDepthIndex = Math.min(this.selectedLevels.length, this.levelSlots.length) - 1;

            this.csvRows.forEach(row => {
                this.csvColumns.forEach(column => {
                    const value = this.normCell(row[column]);
                    if (!value || value === '(Blank)') return;
                    if (!value.toLowerCase().includes(query)) return;

                    const selectedDepthIndex = this.selectedLevels.indexOf(column);
                    const depthIndex = selectedDepthIndex >= 0 && selectedDepthIndex < this.levelSlots.length ? selectedDepthIndex : -1;
                    const targetIndex = depthIndex >= 0 ? depthIndex : maxDepthIndex;
                    const hasTargetPath = targetIndex >= 0;
                    const pathParts = hasTargetPath ? this.pathPartsForRow(row, targetIndex) : [];
                    const pathKeys = hasTargetPath ? this.pathKeysForRow(row, targetIndex) : [];
                    const pathLabel = pathParts.map(part => part.col + ': ' + part.val).join(' | ');
                    const key = [
                        depthIndex >= 0 ? 'depth' : 'column',
                        column,
                        value,
                        hasTargetPath ? pathKeys[targetIndex] : ''
                    ].join('\x1f');

                    if (!groups.has(key)) {
                        groups.set(key, {
                            key,
                            value,
                            column,
                            depthLabel: depthIndex >= 0 ? 'Depth ' + (depthIndex + 1) : 'Column',
                            pathLabel,
                            pathKeys,
                            targetIndex,
                            selectable: hasTargetPath,
                            count: 0,
                        });
                    }
                    groups.get(key).count += 1;
                });
            });

            const orderFor = (column) => {
                const selectedIndex = this.selectedLevels.indexOf(column);
                if (selectedIndex >= 0) return selectedIndex;
                const columnIndex = this.csvColumns.indexOf(column);
                return this.levelSlots.length + (columnIndex >= 0 ? columnIndex : 999);
            };

            return Array.from(groups.values())
                .sort((a, b) => {
                    const depthOrder = orderFor(a.column) - orderFor(b.column);
                    if (depthOrder !== 0) return depthOrder;
                    if (b.count !== a.count) return b.count - a.count;
                    return a.value.localeCompare(b.value);
                })
                .slice(0, 30);
        },

        selectGeneralSearchResult(item) {
            this.generalSearch = item.value;
            this.generalSearchSelection = { ...item };

            if (!item.selectable || item.targetIndex < 0 || !item.pathKeys?.length) return;

            const targetIndex = Math.min(item.targetIndex, this.lastLevelIndex, this.levelSlots.length - 1);
            this.activeDepthIndex = targetIndex;
            for (let idx = 0; idx <= targetIndex; idx++) {
                const slot = this.levelSlots[idx];
                const key = item.pathKeys[idx];
                if (!slot || !key) continue;

                const current = this.sel[slot] || [];
                if (!current.includes(key)) {
                    this.sel[slot] = [...current, key];
                }
            }

            if (targetIndex === this.lastLevelIndex) {
                const finalKey = item.pathKeys[targetIndex];
                const maxCount = this.countRowsForPath(targetIndex, finalKey);
                const fallbackQuota = Math.max(1, Number(this.defaultQuotaPerItem) || 1);
                if (!this.quotas[finalKey]) {
                    this.quotas[finalKey] = Math.min(maxCount || item.count || fallbackQuota, fallbackQuota);
                }
            }

            if (targetIndex >= 4) {
                this.open.village = true;
            } else if (targetIndex >= 2) {
                this.open.row2 = true;
            } else {
                this.open.row1 = true;
            }
        },

        clearGeneralSearch() {
            this.generalSearch = '';
            this.generalSearchSelection = null;
        },

        toggleAvailableLevel(column) {
            if (!column) return;
            if (this.selectedLevels.includes(column)) {
                this.selectedLevels = this.selectedLevels.filter(level => level !== column);
            } else {
                this.selectedLevels = [...this.selectedLevels, column];
            }
            this.activeDepthIndex = null;
            this.resetSelections();
            this.generalSearchSelection = null;
        },

        removeAvailableLevel(column) {
            this.selectedLevels = this.selectedLevels.filter(level => level !== column);
            this.activeDepthIndex = null;
            this.resetSelections();
            this.generalSearchSelection = null;
        },

        availableLevelsButtonLabel() {
            if (!this.csvColumns.length) return 'Upload CSV to load levels';
            if (!this.selectedLevels.length) return 'Select levels...';
            return this.selectedLevels.join(' | ');
        },

        csrfToken() {
            return document.querySelector('meta[name=\x22csrf-token\x22]')?.getAttribute('content') || '';
        },

        sameColumnSet(columns) {
            return JSON.stringify(columns || []) === JSON.stringify(this.csvColumns || []);
        },

        get matchingProfiles() {
            const query = (this.profileSearch || '').trim().toLowerCase();
            return this.profiles.filter(profile => {
                const nameMatches = !query || (profile.name || '').toLowerCase().includes(query);
                const columnsMatch = !this.csvColumns.length || this.sameColumnSet(profile.csv_columns);
                return nameMatches && columnsMatch;
            });
        },

        get canCreateProfile() {
            const name = (this.profileSearch || '').trim();
            if (!name || !this.csvColumns.length || !this.selectedLevels.length) return false;
            return !this.matchingProfiles.some(profile => (profile.name || '').toLowerCase() === name.toLowerCase());
        },

        profilePayload(name) {
            return {
                name,
                csv_columns: this.csvColumns,
                selected_uuid_column: this.selectedUuidColumn,
                selected_levels: this.selectedLevels,
                selected_values: this.sel,
                quotas: this.quotas,
                settings: {
                    min_count: Math.max(0, Number(this.minCount) || 0),
                    default_quota_per_item: Math.max(0, Number(this.defaultQuotaPerItem) || 0),
                },
            };
        },

        async loadProfiles() {
            if (this.profilesLoading) return;
            this.profilesLoading = true;

            try {
                const response = await fetch('/data-sampler/profiles', {
                    headers: { 'Accept': 'application/json' },
                });
                const body = await response.json().catch(() => ({}));
                if (!response.ok) throw new Error(body.message || 'Unable to load profiles.');
                this.profiles = body.profiles || [];
            } catch (error) {
                this.profileError = error.message || 'Unable to load profiles.';
            } finally {
                this.profilesLoading = false;
            }
        },

        async createProfile() {
            const name = (this.profileSearch || '').trim();
            if (!name || !this.csvColumns.length || !this.selectedLevels.length || this.profileSaving) return;

            this.profileSaving = true;
            this.profileError = '';
            this.profileMessage = '';

            try {
                const response = await fetch('/data-sampler/profiles', {
                    method: 'POST',
                    headers: {
                        'Accept': 'application/json',
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': this.csrfToken(),
                    },
                    body: JSON.stringify(this.profilePayload(name)),
                });
                const body = await response.json().catch(() => ({}));
                if (!response.ok) throw new Error(body.message || 'Unable to save profile.');

                const profile = body.profile;
                this.profiles = [profile, ...this.profiles.filter(item => item.id !== profile.id)];
                this.applyProfile(profile);
                this.profileMessage = 'Profile saved.';
                this.profileDropdownOpen = false;
            } catch (error) {
                this.profileError = error.message || 'Unable to save profile.';
            } finally {
                this.profileSaving = false;
            }
        },

        async updateSelectedProfile() {
            if (!this.selectedProfile || !this.csvColumns.length || !this.selectedLevels.length || this.profileSaving) return;

            this.profileSaving = true;
            this.profileError = '';
            this.profileMessage = '';

            try {
                const response = await fetch('/data-sampler/profiles/' + this.selectedProfile.id, {
                    method: 'PUT',
                    headers: {
                        'Accept': 'application/json',
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': this.csrfToken(),
                    },
                    body: JSON.stringify(this.profilePayload(this.selectedProfile.name)),
                });
                const body = await response.json().catch(() => ({}));
                if (!response.ok) throw new Error(body.message || 'Unable to update profile.');

                const profile = body.profile;
                this.profiles = [profile, ...this.profiles.filter(item => item.id !== profile.id)];
                this.selectedProfile = profile;
                this.profileSearch = profile.name;
                this.profileMessage = 'Profile updated.';
            } catch (error) {
                this.profileError = error.message || 'Unable to update profile.';
            } finally {
                this.profileSaving = false;
            }
        },

        applyProfile(profile) {
            if (this.csvColumns.length && !this.sameColumnSet(profile.csv_columns)) {
                this.profileError = 'This profile does not match uploaded CSV columns.';
                return;
            }

            this.selectedProfile = profile;
            this.profileSearch = profile.name;
            this.profileDropdownOpen = false;
            this.profileError = '';
            this.profileMessage = '';
            this.selectedUuidColumn = profile.selected_uuid_column || this.selectedUuidColumn;
            this.selectedLevels = [...(profile.selected_levels || [])];
            this.activeDepthIndex = null;
            this.resetSelections();

            const savedSelections = profile.selected_values || {};
            this.levelSlots.forEach(slot => {
                this.sel[slot] = Array.isArray(savedSelections[slot]) ? [...savedSelections[slot]] : [];
            });

            this.quotas = { ...(profile.quotas || {}) };
            this.minCount = Number(profile.settings?.min_count ?? this.minCount);
            this.defaultQuotaPerItem = Number(profile.settings?.default_quota_per_item ?? this.defaultQuotaPerItem);
            this.openPanelsFromSelection();
        },

        openPanelsFromSelection() {
            const deepest = this.levelSlots.reduce((found, slot, idx) => {
                return (this.sel[slot] || []).length ? idx : found;
            }, -1);

            this.open.row1 = true;
            this.open.row2 = deepest >= 2;
            this.open.village = deepest >= 4;
        },

        handleManualCsvUpload(event) {
            const file = event.target.files[0];
            if (!file) return;

            this.uploadedFileName = file.name;
            const splash = document.getElementById('uploadSplash');
            if (splash) splash.classList.remove('hidden');

            const reader = new FileReader();
            reader.onload = (e) => {
                const text = e.target.result || '';
                const lines = text.split(/\r?\n/).filter(line => line.trim() !== '');
                const headers = lines.length ? this.parseCsvLine(lines[0]).filter(Boolean) : [];

                const rows = lines.slice(1).map(line => {
                    const values = this.parseCsvLine(line);
                    return headers.reduce((acc, header, idx) => {
                        acc[header] = values[idx] || '';
                        return acc;
                    }, {});
                });

                this.uploadedFileRows = Math.max(lines.length - 1, 0);
                this.uploadedFileCols = headers.length;
                this.csvColumns = headers;
                this.csvRows = rows;
                this.selectedUuidColumn = headers.includes('submission_uuid') ? 'submission_uuid' : (headers[0] || '');
                this.selectedLevels = [];
                this.activeDepthIndex = null;
                this.selectedProfile = null;
                this.profileSearch = '';
                this.profileError = '';
                this.profileMessage = '';
                this.resetSelections();
                this.clearGeneralSearch();
                this.availableLevelsOpen = false;

                if (splash) setTimeout(() => splash.classList.add('hidden'), 500);
            };

            reader.onerror = () => this.clearManualCsvFile();
            reader.readAsText(file);
        },

        clearManualCsvFile() {
            this.uploadedFileName = '';
            this.uploadedFileRows = 0;
            this.uploadedFileCols = 0;
            this.csvColumns = [];
            this.csvRows = [];
            this.selectedUuidColumn = '';
            this.selectedLevels = [];
            this.activeDepthIndex = null;
            this.selectedProfile = null;
            this.profileSearch = '';
            this.profileError = '';
            this.profileMessage = '';
            this.resetSelections();
            this.clearGeneralSearch();
            this.availableLevelsOpen = false;
            if (this.$refs.manualFileInput) this.$refs.manualFileInput.value = '';
            const splash = document.getElementById('uploadSplash');
            if (splash) splash.classList.add('hidden');
        },

        resetSelections() {
            this.sel = { district: [], tehsil: [], uc: [], deh: [], village: [] };
            this.open = { row1: true, row2: false, village: false };
            this.quotas = {};
        },

        get lastLevelIndex() {
            return Math.max(0, this.selectedLevels.length - 1);
        },

        get lastLevelSlot() {
            return this.levelSlots[this.lastLevelIndex] || 'district';
        },

        isLastLevel(index) {
            return this.selectedLevels.length > 0 && index === this.lastLevelIndex;
        },

        isLastLevelPanelActive() {
            if (!this.selectedLevels.length) return false;
            if (this.lastLevelIndex === 0) return this.hasLevel(0);
            const prevSlot = this.levelSlots[this.lastLevelIndex - 1];
            return (this.sel[prevSlot] || []).length > 0;
        },

        hierarchyPipeLabel() {
            return this.selectedLevels.join(' | ');
        },

        getFilteredLastLevelItems() {
            const min = Math.max(0, Number(this.minCount) || 0);
            return this.getLevelItems(this.lastLevelIndex).filter(item => item.count >= min);
        },

        isLastItemSelected(key) {
            return (this.sel[this.lastLevelSlot] || []).includes(key);
        },

        getQuota(key) {
            return Number(this.quotas[key]) || 0;
        },

        toggleLastItem(item) {
            const slot = this.lastLevelSlot;
            const selected = [...(this.sel[slot] || [])];
            const idx = selected.indexOf(item.key);
            if (idx >= 0) {
                selected.splice(idx, 1);
                delete this.quotas[item.key];
            } else {
                selected.push(item.key);
                const def = Math.max(0, Number(this.defaultQuotaPerItem) || 0);
                this.quotas[item.key] = Math.min(item.count, def);
            }
            this.sel[slot] = selected;
        },

        toggleSelectAllLastLevel(checked) {
            const slot = this.lastLevelSlot;
            const items = this.getFilteredLastLevelItems();
            if (!checked) {
                this.sel[slot] = [];
                items.forEach(i => delete this.quotas[i.key]);
                return;
            }
            const def = Math.max(0, Number(this.defaultQuotaPerItem) || 0);
            this.sel[slot] = items.map(i => i.key);
            items.forEach(i => {
                this.quotas[i.key] = Math.min(i.count, def);
            });
        },

        adjustQuota(key, delta, maxCount) {
            if (!this.isLastItemSelected(key)) return;
            const next = Math.min(maxCount, Math.max(0, this.getQuota(key) + delta));
            this.quotas[key] = next;
        },

        get totalQuotaSum() {
            return (this.sel[this.lastLevelSlot] || []).reduce((sum, key) => {
                return sum + this.getQuota(key);
            }, 0);
        },

        allLastLevelFilteredSelected() {
            const items = this.getFilteredLastLevelItems();
            if (!items.length) return false;
            const selected = this.sel[this.lastLevelSlot] || [];
            return items.every(i => selected.includes(i.key));
        },

        get activeDepth() {
            if (this.activeDepthIndex !== null && this.levelSlots[this.activeDepthIndex]) {
                return this.levelSlots[this.activeDepthIndex];
            }
            const maxIdx = Math.min(this.selectedLevels.length, this.levelSlots.length) - 1;
            if (maxIdx < 0) return this.levelSlots[0];
            for (let idx = maxIdx; idx >= 0; idx--) {
                const slot = this.levelSlots[idx];
                if (this.sel[slot]?.length) {
                    return this.levelSlots[Math.min(idx + 1, maxIdx)];
                }
            }
            return this.levelSlots[0];
        },

        isCompleted(step) {
            return !!(this.sel[step] && this.sel[step].length > 0);
        },

        isDepthActive(index) {
            if (this.activeDepthIndex !== null) return index <= this.activeDepthIndex;
            const slot = this.levelSlots[index];
            return !!slot && this.activeDepth === slot;
        },

        isDepthCompleted(index) {
            const slot = this.levelSlots[index];
            return !!slot && this.isCompleted(slot);
        },

        focusDepth(index) {
            this.activeDepthIndex = index;
            const cappedIndex = Math.min(index, this.selectedLevels.length - 1, this.levelSlots.length - 1);
            if (cappedIndex < 0) return;

            this.quotas = {};

            for (let idx = cappedIndex + 1; idx < this.levelSlots.length; idx++) {
                const slot = this.levelSlots[idx];
                if (slot) this.sel[slot] = [];
            }

            for (let idx = 0; idx <= cappedIndex; idx++) {
                const slot = this.levelSlots[idx];
                if (!slot || !this.hasLevel(idx)) continue;
                this.sel[slot] = this.getLevelItems(idx).map(item => item.key);
            }

            if (cappedIndex === this.lastLevelIndex) {
                const defaultQuota = Math.max(1, Number(this.defaultQuotaPerItem) || 1);
                this.getLevelItems(cappedIndex).forEach(item => {
                    this.quotas[item.key] = Math.min(item.count, defaultQuota);
                });
            }

            this.open.row1 = cappedIndex >= 0;
            this.open.row2 = cappedIndex >= 2;
            this.open.village = cappedIndex >= 4;
        },

        sel: {
            district: [],
            tehsil: [],
            uc: [],
            deh: [],
            village: [],
        },

        open: {
            row1: true,
            row2: false,
            village: false,
        },

        hasLevel(index) {
            return !!this.selectedLevels[index];
        },

        labelFor(index) {
            return this.selectedLevels[index] || this.levelSlots[index];
        },

        levelItemTitle(item) {
            return item.leaf.val + ' (' + item.count + ')';
        },

        formatParentPipe(item) {
            if (!item.parents || item.parents.length === 0) return '';
            return item.parents.map(p => p.col + ': ' + p.val).join(' | ');
        },

        normCell(val) {
            const s = ((val || '') + '').trim();
            return s ? s : '(Blank)';
        },

        rowPathKey(row, uptoIndex) {
            const parts = [];
            for (let j = 0; j <= uptoIndex; j++) {
                const c = this.selectedLevels[j];
                parts.push(this.normCell(row[c]));
            }
            return parts.join('\x1e');
        },

        pathPartsForRow(row, uptoIndex) {
            const maxIndex = Math.min(uptoIndex, this.selectedLevels.length - 1, this.levelSlots.length - 1);
            const parts = [];
            for (let j = 0; j <= maxIndex; j++) {
                parts.push({
                    col: this.selectedLevels[j],
                    val: this.normCell(row[this.selectedLevels[j]]),
                });
            }
            return parts;
        },

        pathKeysForRow(row, uptoIndex) {
            const maxIndex = Math.min(uptoIndex, this.selectedLevels.length - 1, this.levelSlots.length - 1);
            const keys = [];
            for (let j = 0; j <= maxIndex; j++) {
                keys.push(this.rowPathKey(row, j));
            }
            return keys;
        },

        countRowsForPath(uptoIndex, pathKey) {
            if (uptoIndex < 0 || !pathKey) return 0;
            return this.csvRows.filter(row => this.rowPathKey(row, uptoIndex) === pathKey).length;
        },

        getLevelItems(index) {
            if (!this.hasLevel(index)) return [];
            let rows = [...this.csvRows];

            for (let i = 0; i < index; i++) {
                const slot = this.levelSlots[i];
                const selected = this.sel[slot] || [];
                if (!this.selectedLevels[i] || selected.length === 0) continue;
                rows = rows.filter(row => selected.includes(this.rowPathKey(row, i)));
            }

            const counts = {};
            rows.forEach(row => {
                const key = this.rowPathKey(row, index);
                counts[key] = (counts[key] || 0) + 1;
            });

            return Object.entries(counts)
                .map(([key, count]) => {
                    const partVals = key.split('\x1e');
                    const parents = [];
                    for (let j = 0; j < index; j++) {
                        parents.push({
                            col: this.selectedLevels[j],
                            val: partVals[j] || '(Blank)',
                        });
                    }
                    const leaf = {
                        col: this.selectedLevels[index],
                        val: partVals[index] || '(Blank)',
                    };
                    return { key, count, parents, leaf };
                })
                .sort((a, b) => a.key.localeCompare(b.key));
        },

        isActive(step) {
            const map = {
                district: this.hasLevel(0),
                tehsil: this.hasLevel(1) && this.sel.district.length > 0,
                uc: this.hasLevel(2) && this.sel.tehsil.length > 0,
                deh: this.hasLevel(3) && this.sel.uc.length > 0,
                village: this.hasLevel(4) && this.sel.deh.length > 0,
            };
            return !!map[step];
        },

        onSelect(step) {
            const stepIndex = this.levelSlots.indexOf(step);
            if (stepIndex >= 0 && stepIndex < this.lastLevelIndex) {
                this.sel[this.lastLevelSlot] = [];
                this.quotas = {};
            }

            if (step === 'district') {
                this.sel.tehsil = [];
                this.sel.uc = [];
                this.sel.deh = [];
                this.sel.village = [];
            } else if (step === 'tehsil') {
                this.sel.uc = [];
                this.sel.deh = [];
                this.sel.village = [];
            } else if (step === 'uc') {
                this.sel.deh = [];
                this.sel.village = [];
            } else if (step === 'deh') {
                this.sel.village = [];
            }

            if (this.sel.district.length > 0 && this.sel.tehsil.length > 0) {
                this.open.row2 = true;
            }
            if (this.sel.uc.length > 0 && this.sel.deh.length > 0) {
                this.open.village = true;
            } else if (this.sel.deh.length === 0) {
                this.open.village = false;
            }
        },

        toggleRow(row) {
            if (row === 'row2' && !this.isActive('uc')) return;
            if (row === 'village' && !this.isActive('village')) return;
            this.open[row] = !this.open[row];
        },

        get totalRecords() {
            if (this.selectedLevels.length > 0) {
                return this.totalQuotaSum;
            }
            const t = this.sel.district.length
                    + this.sel.tehsil.length
                    + this.sel.uc.length
                    + this.sel.deh.length
                    + this.sel.village.length;
            return t > 0 ? t * 122 : 0;
        },

        apiPartValue(value) {
            return value === '(Blank)' ? '' : value;
        },

        apiPathKey(key) {
            return String(key || '')
                .split('\x1e')
                .map(part => this.apiPartValue(part))
                .join('||');
        },

        buildManualSelectedPayload() {
            const selected = {};
            this.selectedLevels.forEach((level, idx) => {
                const slot = this.levelSlots[idx];
                const keys = this.sel[slot] || [];
                if (!keys.length) return;

                if (idx === this.lastLevelIndex) {
                    selected[level] = keys.map(key => this.apiPathKey(key));
                    return;
                }

                selected[level] = [...new Set(keys.map(key => {
                    const parts = String(key || '').split('\x1e');
                    return this.apiPartValue(parts[idx] || '');
                }))];
            });
            return selected;
        },

        buildManualQuotaPayload() {
            return Object.entries(this.quotas).reduce((payload, [key, quota]) => {
                const n = Math.max(0, Number(quota) || 0);
                if (n > 0) {
                    payload[this.apiPathKey(key)] = n;
                }
                return payload;
            }, {});
        },

        manualSampleRowsFromResponse(response) {
            return response && (response.sampled || response.data || response.sample || response.results || []);
        },

        csvCell(value) {
            const text = value === null || value === undefined ? '' : String(value);
            return `\x22${text.replace(/\x22/g, '\x22\x22')}\x22`;
        },

        downloadManualCsv(rows) {
            if (!rows || !rows.length) return;

            const headers = [...this.csvColumns];
            Object.keys(rows[0] || {}).forEach(key => {
                if (!headers.includes(key)) headers.push(key);
            });

            const csv = [
                headers.map(header => this.csvCell(header)).join(','),
                ...rows.map(row => headers.map(header => this.csvCell(row[header])).join(','))
            ].join('\n');

            const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
            const link = document.createElement('a');
            link.href = URL.createObjectURL(blob);
            link.download = `manual_hierarchical_sample_${Date.now()}.csv`;
            link.style.visibility = 'hidden';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            URL.revokeObjectURL(link.href);
        },

        async downloadManualSample() {
            if (this.manualSamplingLoading) return;

            this.manualSamplingError = '';

            if (!this.csvRows.length) {
                this.manualSamplingError = 'Please upload a CSV file first.';
                return;
            }

            if (!this.selectedLevels.length) {
                this.manualSamplingError = 'Please select at least one hierarchy level.';
                return;
            }

            if (!(this.sel[this.lastLevelSlot] || []).length || this.totalQuotaSum <= 0) {
                this.manualSamplingError = 'Please select at least one item and set quota greater than 0.';
                return;
            }

            this.manualSamplingLoading = true;

            try {
                const response = await fetch('/hierarchical/sample', {
                    method: 'POST',
                    headers: {
                        'Accept': 'application/json',
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name=\x22csrf-token\x22]')?.getAttribute('content') || ''
                    },
                    body: JSON.stringify({
                        data: this.csvRows,
                        depth_levels: this.selectedLevels,
                        selected: this.buildManualSelectedPayload(),
                        mask_rules: [],
                        min_count: Math.max(0, Number(this.minCount) || 0),
                        sample_count: Math.max(1, Number(this.defaultQuotaPerItem) || 1),
                        quota: this.buildManualQuotaPayload(),
                        random_state: 42
                    })
                });

                const body = await response.json().catch(() => ({}));

                if (!response.ok) {
                    const detail = Array.isArray(body.detail) ? JSON.stringify(body.detail) : (body.detail || body.message || 'Sampling failed.');
                    throw new Error(detail);
                }

                const rows = this.manualSampleRowsFromResponse(body);
                if (!rows.length) {
                    this.manualSamplingError = 'No rows returned for the selected hierarchy and quotas.';
                    return;
                }

                this.downloadManualCsv(rows);
            } catch (error) {
                this.manualSamplingError = error.message || 'Sampling failed.';
            } finally {
                this.manualSamplingLoading = false;
            }
        }
    }"
    
    x-on:sampling-method-selected.window="activeSampler = $event.detail.method"
    x-on:reset-sampler.window="activeSampler = null">

    {{-- ══ HEADER ══════════════════════════════════════════════════════════ --}}
    <div class="flex items-center gap-2">
    <svg class="w-6 h-6 flex-shrink-0 text-blue-700" viewBox="0 0 24 24" fill="none">
        <path d="M4 6H20M4 12H14M4 18H9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
    <h1 class="text-lg sm:text-[24px] font-bold text-gray-900 leading-none ">
        Sampling Tool
    </h1>
    </div>

 {{-- ══ TABS ════════════════════════════════════════════════════════════ --}}
<div class="flex items-center border-b border-gray-200 gap-1 mt-3">
       @foreach([
        'cochran' => 'Cochran Calculator',
        'sampler' => 'Manual Sampler',
        'appender' => 'Data Appender',
    ] as $key => $label)

    <button
        @click="activeTab = '{{ $key }}'"
        :class="activeTab === '{{ $key }}'
            ? 'text-blue-600 border-b-2 border-blue-600 font-semibold'
            : 'text-gray-500 border-b-2 border-transparent hover:text-gray-700 font-medium'"
        class="pb-2.5 -mb-px px-3 text-sm transition-colors whitespace-nowrap">
        {{ $label }}
    </button>

    @endforeach

    {{-- Right side (Admin) --}}
    <button
        @click="activeTab = 'admin'"
        :class="activeTab === 'admin'
            ? 'text-blue-600 border-b-2 border-blue-600 font-semibold'
            : 'text-gray-500 border-b-2 border-transparent hover:text-gray-700 font-medium'"
        class="ml-auto pb-2.5 -mb-px px-3 text-sm transition-colors whitespace-nowrap">
        Admin
    </button>
</div>

    {{-- ══ DATA SAMPLER TAB ════════════════════════════════════════════════ --}}
    <div x-show="activeTab === 'sampler'" class="flex flex-col gap-4">

        {{-- ── Upload File Card ─────────────────────────────────────────── --}}
        <div class="bg-white rounded-xl border border-gray-100 p-5 flex flex-col gap-3">
            <p class="text-sm font-bold text-gray-900">Upload File</p>

            <div class="relative border-2 border-dashed border-gray-200 rounded-xl py-10 flex flex-col items-center gap-2 hover:border-blue-300 transition-colors cursor-pointer"
                @click="$refs.manualFileInput.click()">

                <div id="uploadSplash" class="hidden absolute inset-0 bg-white/90 rounded-xl flex items-center justify-center gap-2 text-sm text-blue-600 font-medium">
                    <svg class="animate-spin w-4 h-4" viewBox="0 0 24 24" fill="none">
                        <circle cx="12" cy="12" r="10" stroke="#3b82f6" stroke-width="3" stroke-dasharray="30 70"/>
                    </svg>
                    Uploading...
                </div>

                <div class="w-10 h-10 rounded-full bg-blue-50 flex items-center justify-center">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
                        <path d="M12 16V8M12 8L9 11M12 8L15 11" stroke="#3b82f6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M20 16.7C21.2 15.9 22 14.5 22 13C22 10.8 20.2 9 18 9C17.8 9 17.5 9 17.3 9.1C16.7 6.7 14.5 5 12 5C9 5 6.5 7.5 6.5 10.5V11C4.5 11.5 3 13.4 3 15.5C3 17.4 4.2 19 6 19.6" stroke="#3b82f6" stroke-width="1.5" stroke-linecap="round"/>
                    </svg>
                </div>
                <p class="text-xs text-gray-400" x-text="uploadedFileName || 'No file chosen'"></p>
                <input type="file" x-ref="manualFileInput" accept=".csv" class="hidden" @change="handleManualCsvUpload($event)">
                <button type="button" class="mt-1 px-4 py-1.5 bg-blue-600 text-white text-xs font-semibold rounded-lg hover:bg-blue-700 transition-colors">
                    Upload File
                </button>
            </div>

            <div class="flex items-center justify-between text-xs text-gray-400">
                <div class="flex items-center gap-4">
                    <span class="flex items-center gap-1">
                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z" stroke="#9ca3af" stroke-width="2"/></svg>
                        <span x-text="uploadedFileName || 'No file chosen'"></span>
                    </span>
                    <span x-text="uploadedFileRows + ' rows'"></span>
                    <span x-text="uploadedFileCols + ' columns'"></span>
                </div>
                <button type="button" class="text-red-400 hover:text-red-600 transition-colors" @click.stop="clearManualCsvFile()">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                </button>
            </div>
        </div>

        {{-- ── Sampling Configuration ───────────────────────────────────── --}}
        <div class="bg-white rounded-xl border border-gray-100 p-5 flex flex-col gap-4">
            <div class="flex items-center gap-2">
                <svg class="w-5 h-5 text-blue-700" viewBox="0 0 24 24" fill="none">
                    <path d="M4 6H20M4 12H14M4 18H9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
                <h3 class="text-[18px] font-bold text-[#2B3437]">Sampling Configuration</h3>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                <div class="flex flex-col gap-1.5">
                    <label class="text-[12px] font-bold uppercase tracking-[0.09em] text-[#586064]">UUID/ID Column</label>
                    <select
                        x-model="selectedUuidColumn"
                        :disabled="!csvColumns.length"
                        class="w-full bg-[#F1F4F6] rounded-md px-3.5 py-2.5 text-[13px] text-[#2B3437] outline-none border border-transparent focus:border-[#005AC2]/40 focus:bg-white transition-all cursor-pointer disabled:cursor-not-allowed disabled:text-gray-400">
                        <option value="" x-text="csvColumns.length ? 'Select column...' : 'Upload CSV to load columns'"></option>
                        <template x-for="col in csvColumns" :key="'uuid-' + col">
                            <option :value="col" x-text="col"></option>
                        </template>
                    </select>
                </div>

                <div class="flex flex-col gap-1.5">
                    <label class="text-[12px] font-bold uppercase tracking-[0.09em] text-[#586064]">Available Levels</label>
                    <div class="relative" @click.outside="availableLevelsOpen = false">
                        <button
                            type="button"
                            @click="if (csvColumns.length) availableLevelsOpen = !availableLevelsOpen"
                            :disabled="!csvColumns.length"
                            class="w-full min-h-[42px] bg-[#F1F4F6] rounded-md px-3 py-2.5 text-[13px] text-left text-[#2B3437] outline-none border border-transparent focus:border-[#005AC2]/40 focus:bg-white transition-all cursor-pointer disabled:cursor-not-allowed disabled:text-gray-400 flex items-center justify-between gap-3">
                            <span class="truncate" x-text="availableLevelsButtonLabel()"></span>
                            <svg :class="availableLevelsOpen ? 'rotate-180' : ''" class="w-4 h-4 text-[#586064] transition-transform flex-shrink-0" fill="none" viewBox="0 0 24 24">
                                <path d="M19 9l-7 7-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                            </svg>
                        </button>

                        <div
                            x-show="availableLevelsOpen && csvColumns.length > 0"
                            x-cloak
                            class="absolute z-40 mt-1 w-full bg-white border border-gray-200 rounded-lg shadow-lg overflow-hidden">
                            <div class="px-3 py-2 border-b border-gray-100 flex items-center justify-between gap-3">
                                <span class="text-[11px] font-bold uppercase tracking-[0.09em] text-[#586064]">Select Levels</span>
                                <button
                                    type="button"
                                    x-show="selectedLevels.length > 0"
                                    @click.stop="selectedLevels = []; resetSelections(); generalSearchSelection = null"
                                    class="text-[11px] font-semibold text-red-500 hover:text-red-600">
                                    Clear
                                </button>
                            </div>
                            <div class="max-h-64 overflow-y-auto py-1">
                                <template x-for="col in csvColumns" :key="'level-option-' + col">
                                    <label class="flex items-center justify-between gap-3 px-3 py-2 hover:bg-blue-50 cursor-pointer">
                                        <span class="flex items-center gap-2 min-w-0">
                                            <input
                                                type="checkbox"
                                                :checked="selectedLevels.includes(col)"
                                                @change="toggleAvailableLevel(col)"
                                                class="w-4 h-4 rounded border-gray-300 accent-blue-600 cursor-pointer flex-shrink-0">
                                            <span class="text-[13px] font-medium text-gray-800 truncate" x-text="col"></span>
                                        </span>
                                        <span
                                            x-show="selectedLevels.includes(col)"
                                            class="text-[11px] font-semibold text-blue-600 bg-blue-50 rounded-full px-2 py-0.5 flex-shrink-0"
                                            x-text="'Depth ' + (selectedLevels.indexOf(col) + 1)">
                                        </span>
                                    </label>
                                </template>
                            </div>
                        </div>
                    </div>
                    <div class="flex flex-wrap gap-1.5 mt-2 min-h-[28px]" x-show="selectedLevels.length > 0">
                        <template x-for="level in selectedLevels" :key="'lvl-chip-' + level">
                            <span class="inline-flex items-center gap-1 bg-[#D8E2FF] border border-[#ABB3B7]/50 rounded-full pl-2.5 pr-1.5 py-0.5 text-[12px] font-medium text-[#003C86]">
                                <span x-text="level"></span>
                                <button
                                    type="button"
                                    class="w-5 h-5 flex items-center justify-center text-[#003C86] hover:text-[#2B3437] transition-colors text-[16px] leading-none"
                                    @click="removeAvailableLevel(level)"
                                >×</button>
                            </span>
                        </template>
                    </div>
                </div>
            </div>
        </div>

        {{-- ── Manual Sampler Card ──────────────────────────────────────── --}}
        <div class="bg-white rounded-xl p-6 flex flex-col gap-4 border border-gray-100">
            <div class="flex items-center gap-3">
                <img src="{{ asset('assets/media/icons/ManualSampler.svg') }}" />
                <div class="flex flex-col gap-0.5">
                    <h2 class="font-bold text-[#0F172A] text-[18px] text-base leading-tight">Manual Sampler</h2>
                    <p class="text-[10px] uppercase tracking-widest text-gray-400 font-medium">Configure Extraction Parameters</p>
                </div>
            </div>

            {{-- Profile + General Search --}}
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div class="flex flex-col gap-1.5">
                    <label class="text-[11px] uppercase tracking-widest text-[#94A3B8] font-medium">Profile</label>
                    <div class="relative" @click.outside="profileDropdownOpen = false">
                        <div class="flex items-center gap-2">
                            <input
                                type="text"
                                x-model.debounce.150ms="profileSearch"
                                @focus="profileDropdownOpen = true; loadProfiles()"
                                @input="selectedProfile = null; profileDropdownOpen = true; profileError = ''; profileMessage = ''"
                                placeholder="Search or create profile..."
                                class="w-full rounded-lg px-3 py-2 text-sm text-gray-600 placeholder-gray-400 border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition">

                            <button
                                type="button"
                                x-show="canCreateProfile"
                                x-cloak
                                :disabled="profileSaving"
                                @click="createProfile()"
                                title="Save new profile"
                                class="w-9 h-9 flex items-center justify-center rounded-lg bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed">
                                <svg width="15" height="15" viewBox="0 0 24 24" fill="none">
                                    <path d="M12 5v14M5 12h14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                                </svg>
                            </button>

                            <button
                                type="button"
                                x-show="selectedProfile"
                                x-cloak
                                :disabled="profileSaving || !csvColumns.length || !selectedLevels.length"
                                @click="updateSelectedProfile()"
                                title="Update selected profile"
                                class="w-9 h-9 flex items-center justify-center rounded-lg bg-[#0F766E] text-white hover:bg-[#0B635D] disabled:opacity-50 disabled:cursor-not-allowed">
                                <svg width="15" height="15" viewBox="0 0 24 24" fill="none">
                                    <path d="M5 12.5L10 17L19 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                            </button>
                        </div>

                        <div
                            x-show="profileDropdownOpen"
                            x-cloak
                            class="absolute z-40 mt-1 w-full bg-white border border-gray-200 rounded-lg shadow-lg overflow-hidden">
                            <div x-show="profilesLoading" class="px-3 py-3 text-xs text-gray-400 text-center">Loading profiles...</div>

                            <div x-show="!profilesLoading && matchingProfiles.length > 0" class="max-h-64 overflow-y-auto divide-y divide-gray-100">
                                <template x-for="profile in matchingProfiles" :key="'profile-' + profile.id">
                                    <button
                                        type="button"
                                        @click="applyProfile(profile)"
                                        class="w-full px-3 py-2 text-left hover:bg-blue-50 transition-colors flex items-center justify-between gap-3">
                                        <span class="min-w-0">
                                            <span class="block text-sm font-semibold text-gray-800 truncate" x-text="profile.name"></span>
                                            <span class="block text-[11px] text-gray-500 truncate" x-text="(profile.selected_levels || []).join(' | ')"></span>
                                        </span>
                                        <span class="flex-shrink-0 text-[11px] font-semibold text-blue-600 bg-blue-50 rounded-full px-2 py-0.5" x-text="(profile.selected_levels || []).length + ' levels'"></span>
                                    </button>
                                </template>
                            </div>

                            <button
                                type="button"
                                x-show="!profilesLoading && canCreateProfile"
                                @click="createProfile()"
                                class="w-full px-3 py-2 text-left hover:bg-blue-50 transition-colors flex items-center gap-2 text-sm font-semibold text-blue-600">
                                <svg width="13" height="13" viewBox="0 0 24 24" fill="none">
                                    <path d="M12 5v14M5 12h14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                                </svg>
                                <span>Create profile "</span><span x-text="profileSearch.trim()"></span><span>"</span>
                            </button>

                            <p x-show="!profilesLoading && !matchingProfiles.length && !canCreateProfile" class="px-3 py-3 text-xs text-gray-400 text-center">
                                <span x-show="csvColumns.length">No matching profiles found.</span>
                                <span x-show="!csvColumns.length">Upload CSV to use saved profiles.</span>
                            </p>
                        </div>

                        <p x-show="profileError" x-text="profileError" class="text-xs text-red-500 mt-1"></p>
                        <p x-show="profileMessage" x-text="profileMessage" class="text-xs text-emerald-600 mt-1"></p>
                    </div>
                </div>
                <div class="flex flex-col gap-1.5">
                    <label class="text-[11px] uppercase tracking-widest text-[#94A3B8] font-medium">General Search</label>
                    <div class="relative">
                        <input
                            type="text"
                            x-model.debounce.200ms="generalSearch"
                            :disabled="!csvRows.length"
                            :placeholder="csvRows.length ? 'Search any CSV value...' : 'Upload CSV first...'"
                            @input="generalSearchSelection = null"
                            @keydown.escape="clearGeneralSearch()"
                            class="w-full rounded-lg px-3 py-2 pr-9 text-sm text-gray-600 placeholder-gray-400 border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition disabled:bg-gray-50 disabled:cursor-not-allowed">
                        <button
                            type="button"
                            x-show="generalSearch"
                            x-cloak
                            @click="clearGeneralSearch()"
                            class="absolute right-2 top-1/2 -translate-y-1/2 w-6 h-6 flex items-center justify-center rounded-md text-gray-400 hover:text-gray-700 hover:bg-gray-100"
                        >&times;</button>

                        <div
                            x-show="generalSearch.trim().length > 0 && csvRows.length > 0 && (!generalSearchSelection || generalSearchSelection.value !== generalSearch)"
                            x-cloak
                            class="absolute z-30 mt-1 w-full bg-white border border-gray-200 rounded-lg shadow-lg overflow-hidden">
                            <div x-show="generalSearchResults.length > 0" class="max-h-72 overflow-y-auto divide-y divide-gray-100">
                                <template x-for="item in generalSearchResults" :key="item.key">
                                    <button
                                        type="button"
                                        @click="selectGeneralSearchResult(item)"
                                        class="w-full px-3 py-2 text-left hover:bg-blue-50 transition-colors flex items-start justify-between gap-3">
                                        <span class="min-w-0">
                                            <span class="block text-sm font-semibold text-gray-800 truncate" x-text="item.value"></span>
                                            <span x-show="item.pathLabel" class="block text-[11px] text-gray-600 truncate" x-text="item.pathLabel"></span>
                                            <span x-show="!item.selectable" class="block text-[11px] text-amber-600">Select Available Levels to auto-check hierarchy.</span>
                                        </span>
                                        <span class="flex-shrink-0 text-[11px] font-semibold text-blue-600 bg-blue-50 rounded-full px-2 py-0.5" x-text="item.count + ' rows'"></span>
                                    </button>
                                </template>
                            </div>
                            <p x-show="generalSearchResults.length === 0" class="px-3 py-3 text-xs text-gray-400 text-center">
                                No matches found in uploaded CSV.
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Depth Selection --}}
            <div class="flex flex-col gap-1.5">
                <label class="text-[11px] uppercase tracking-widest text-[#94A3B8] font-medium">Depth Selection</label>
                <div x-show="selectedLevels.length > 0" class="flex flex-wrap rounded-lg overflow-hidden border border-gray-200">
                    <template x-for="(level, idx) in selectedLevels" :key="'depth-' + level">
                        <button
                            type="button"
                            @click="focusDepth(idx)"
                            :class="isDepthActive(idx)
                                ? 'bg-blue-50 text-blue-600 font-semibold shadow-inner'
                                : isDepthCompleted(idx)
                                    ? 'bg-white text-blue-500 font-medium hover:bg-blue-50'
                                    : 'bg-white text-gray-500 font-medium hover:bg-gray-50'"
                            class="min-w-[140px] flex-1 py-2.5 px-3 text-center text-sm transition-colors border-r border-b border-gray-200 last:border-r-0"
                            x-text="level">
                        </button>
                    </template>
                </div>
                <p x-show="selectedLevels.length === 0" class="text-xs text-gray-400">Upload CSV and select Available Levels first.</p>
            </div>
        </div>

        {{-- ── Row 1: District + Tehsil ─────────────────────────────────── --}}
        <div x-show="(hasLevel(0) && !isLastLevel(0)) || (hasLevel(1) && !isLastLevel(1))" class="bg-white border border-gray-100 rounded-xl overflow-hidden">

            <div @click="toggleRow('row1')" class="flex items-center cursor-pointer select-none">
                <div class="flex flex-1 items-center gap-3 px-6 py-4">
                    <span class="w-6 h-6 rounded-full bg-blue-600 text-white text-xs flex items-center justify-center font-semibold flex-shrink-0">1</span>
                    <span class="text-sm font-semibold text-gray-800" x-text="'Select ' + labelFor(0)"></span>
                    <span x-show="sel.district.length > 0 && !open.row1"
                          class="ml-1 text-xs bg-blue-100 text-blue-600 px-2 py-0.5 rounded-full font-medium"
                          x-text="sel.district.length + ' selected'"></span>
                </div>

                <div x-show="hasLevel(1) && !isLastLevel(1)" class="flex flex-1 items-center gap-3 px-6 py-4 transition-opacity duration-200"
                     :class="isActive('tehsil') ? 'opacity-100' : 'opacity-30'">
                    <span class="w-6 h-6 rounded-full text-xs flex items-center justify-center font-semibold flex-shrink-0 transition-colors duration-200"
                          :class="isActive('tehsil') ? 'bg-blue-600 text-white' : 'bg-gray-200 text-gray-400'">2</span>
                    <span class="text-sm font-semibold transition-colors duration-200"
                          :class="isActive('tehsil') ? 'text-gray-800' : 'text-gray-400'"
                          x-text="'Select ' + labelFor(1)"></span>
                </div>

                <div class="px-5 flex-shrink-0">
                    <svg :class="open.row1 ? 'rotate-180' : ''"
                         class="w-4 h-4 text-gray-400 transition-transform duration-200"
                         fill="none" viewBox="0 0 24 24">
                        <path d="M19 9l-7 7-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                    </svg>
                </div>
            </div>

            <div x-show="open.row1"
                 x-transition:enter="transition ease-out duration-150"
                 x-transition:enter-start="opacity-0"
                 x-transition:enter-end="opacity-100"
                 class="flex border-t border-gray-100 bg-gray-50/60">

                {{-- District list --}}
                <div x-show="hasLevel(0) && !isLastLevel(0)" class="flex-1 px-6 py-5 flex flex-col gap-3">
                    <label class="flex items-center gap-3 cursor-pointer pb-2 border-b border-gray-100">
                        <input type="checkbox"
                               :checked="getLevelItems(0).length > 0 && sel.district.length === getLevelItems(0).length"
                               @change="sel.district = $event.target.checked ? getLevelItems(0).map(d => d.key) : []; onSelect('district')"
                               class="w-4 h-4 rounded border-gray-300 accent-blue-600 cursor-pointer">
                        <span class="text-sm font-semibold text-gray-700">Select All</span>
                    </label>
                    <template x-for="item in getLevelItems(0)" :key="'lvl0-' + item.key">
                        <label class="flex items-start gap-3 cursor-pointer group">
                            <input type="checkbox" :value="item.key" x-model="sel.district"
                                   @change="onSelect('district')"
                                   class="mt-0.5 w-4 h-4 rounded border-gray-300 accent-blue-600 cursor-pointer">
                            <div class="flex flex-col gap-0.5">
                                <p class="text-sm font-medium text-gray-800 leading-tight group-hover:text-blue-600 transition-colors" x-text="levelItemTitle(item)"></p>
                                <p x-show="item.parents && item.parents.length" class="text-[11px] text-gray-500 leading-snug" x-text="formatParentPipe(item)"></p>
                            </div>
                        </label>
                    </template>
                </div>

                <div x-show="hasLevel(0) && !isLastLevel(0) && hasLevel(1) && !isLastLevel(1)" class="self-stretch w-px transition-colors duration-200"
                     :class="sel.tehsil.length > 0 ? 'bg-blue-300' : 'bg-gray-200'"></div>

                {{-- Tehsil list --}}
                <div x-show="hasLevel(1) && !isLastLevel(1)" class="flex-1 px-6 py-5 flex flex-col gap-3 transition-opacity duration-200"
                     :class="isActive('tehsil') ? 'opacity-100' : 'opacity-30 pointer-events-none'">
                    <label class="flex items-center gap-3 cursor-pointer pb-2 border-b border-gray-100">
                        <input type="checkbox"
                               :checked="getLevelItems(1).length > 0 && sel.tehsil.length === getLevelItems(1).length"
                               @change="sel.tehsil = $event.target.checked ? getLevelItems(1).map(d => d.key) : []; onSelect('tehsil')"
                               class="w-4 h-4 rounded border-gray-300 accent-blue-600 cursor-pointer">
                        <span class="text-sm font-semibold text-gray-700">Select All</span>
                    </label>
                    <template x-for="item in getLevelItems(1)" :key="'lvl1-' + item.key">
                        <label class="flex items-start gap-3 cursor-pointer group">
                            <input type="checkbox" :value="item.key" x-model="sel.tehsil"
                                   @change="onSelect('tehsil')"
                                   class="mt-0.5 w-4 h-4 rounded border-gray-300 accent-blue-600 cursor-pointer">
                            <div class="flex flex-col gap-0.5">
                                <p class="text-sm font-medium text-gray-800 leading-tight group-hover:text-blue-600 transition-colors" x-text="levelItemTitle(item)"></p>
                                <p x-show="item.parents && item.parents.length" class="text-[11px] text-gray-500 leading-snug" x-text="formatParentPipe(item)"></p>
                            </div>
                        </label>
                    </template>
                </div>
            </div>
        </div>

        {{-- ── Row 2: UC + Deh ──────────────────────────────────────────── --}}
        <div x-show="(hasLevel(2) && !isLastLevel(2)) || (hasLevel(3) && !isLastLevel(3))" class="border border-gray-100 rounded-xl overflow-hidden transition-opacity duration-200"
             :class="isActive('uc') ? 'opacity-100 bg-white' : 'opacity-50 bg-gray-50 pointer-events-none'">

            <div @click="toggleRow('row2')"
                 class="flex items-center select-none"
                 :class="isActive('uc') ? 'cursor-pointer' : 'cursor-default'">

                <div class="flex flex-1 items-center gap-3 px-6 py-4">
                    <span class="w-6 h-6 rounded-full text-xs flex items-center justify-center font-semibold flex-shrink-0 transition-colors duration-200"
                          :class="isActive('uc') ? 'bg-blue-600 text-white' : 'bg-gray-200 text-gray-400'">3</span>
                    <span class="text-sm font-semibold transition-colors duration-200"
                          :class="isActive('uc') ? 'text-gray-800' : 'text-gray-400'"
                          x-text="'Select ' + labelFor(2)"></span>
                </div>

                <div x-show="hasLevel(3) && !isLastLevel(3)" class="flex flex-1 items-center gap-3 px-6 py-4 transition-opacity duration-200"
                     :class="isActive('deh') ? 'opacity-100' : 'opacity-30'">
                    <span class="w-6 h-6 rounded-full text-xs flex items-center justify-center font-semibold flex-shrink-0 transition-colors duration-200"
                          :class="isActive('deh') ? 'bg-blue-600 text-white' : 'bg-gray-200 text-gray-400'">4</span>
                    <span class="text-sm font-semibold transition-colors duration-200"
                          :class="isActive('deh') ? 'text-gray-800' : 'text-gray-400'"
                          x-text="'Select ' + labelFor(3)"></span>
                </div>

                <div class="px-5 flex-shrink-0">
                    <svg :class="open.row2 ? 'rotate-180' : ''"
                         class="w-4 h-4 text-gray-400 transition-transform duration-200"
                         fill="none" viewBox="0 0 24 24">
                        <path d="M19 9l-7 7-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                    </svg>
                </div>
            </div>

            <div x-show="open.row2"
                 x-transition:enter="transition ease-out duration-150"
                 x-transition:enter-start="opacity-0"
                 x-transition:enter-end="opacity-100"
                 class="flex border-t border-gray-100 bg-gray-50/60">

                {{-- UC list --}}
                <div x-show="hasLevel(2) && !isLastLevel(2)" class="flex-1 px-6 py-5 flex flex-col gap-3">
                    <label class="flex items-center gap-3 cursor-pointer pb-2 border-b border-gray-100">
                        <input type="checkbox"
                               :checked="getLevelItems(2).length > 0 && sel.uc.length === getLevelItems(2).length"
                               @change="sel.uc = $event.target.checked ? getLevelItems(2).map(d => d.key) : []; onSelect('uc')"
                               class="w-4 h-4 rounded border-gray-300 accent-blue-600 cursor-pointer">
                        <span class="text-sm font-semibold text-gray-700">Select All</span>
                    </label>
                    <template x-for="item in getLevelItems(2)" :key="'lvl2-' + item.key">
                        <label class="flex items-start gap-3 cursor-pointer group">
                            <input type="checkbox" :value="item.key" x-model="sel.uc"
                                   @change="onSelect('uc')"
                                   class="mt-0.5 w-4 h-4 rounded border-gray-300 accent-blue-600 cursor-pointer">
                            <div class="flex flex-col gap-0.5">
                                <p class="text-sm font-medium text-gray-800 leading-tight group-hover:text-blue-600 transition-colors" x-text="levelItemTitle(item)"></p>
                                <p x-show="item.parents && item.parents.length" class="text-[11px] text-gray-500 leading-snug" x-text="formatParentPipe(item)"></p>
                            </div>
                        </label>
                    </template>
                </div>

                <div x-show="hasLevel(2) && !isLastLevel(2) && hasLevel(3) && !isLastLevel(3)" class="self-stretch w-px transition-colors duration-200"
                     :class="sel.deh.length > 0 ? 'bg-blue-300' : 'bg-gray-200'"></div>

                {{-- Deh list --}}
                <div x-show="hasLevel(3) && !isLastLevel(3)" class="flex-1 px-6 py-5 flex flex-col gap-3 transition-opacity duration-200"
                     :class="isActive('deh') ? 'opacity-100' : 'opacity-30 pointer-events-none'">
                    <label class="flex items-center gap-3 cursor-pointer pb-2 border-b border-gray-100">
                        <input type="checkbox"
                               :checked="getLevelItems(3).length > 0 && sel.deh.length === getLevelItems(3).length"
                               @change="sel.deh = $event.target.checked ? getLevelItems(3).map(d => d.key) : []; onSelect('deh')"
                               class="w-4 h-4 rounded border-gray-300 accent-blue-600 cursor-pointer">
                        <span class="text-sm font-semibold text-gray-700">Select All</span>
                    </label>
                    <template x-for="item in getLevelItems(3)" :key="'lvl3-' + item.key">
                        <label class="flex items-start gap-3 cursor-pointer group">
                            <input type="checkbox" :value="item.key" x-model="sel.deh"
                                   @change="onSelect('deh')"
                                   class="mt-0.5 w-4 h-4 rounded border-gray-300 accent-blue-600 cursor-pointer">
                            <div class="flex flex-col gap-0.5">
                                <p class="text-sm font-medium text-gray-800 leading-tight group-hover:text-blue-600 transition-colors" x-text="levelItemTitle(item)"></p>
                                <p x-show="item.parents && item.parents.length" class="text-[11px] text-gray-500 leading-snug" x-text="formatParentPipe(item)"></p>
                            </div>
                        </label>
                    </template>
                </div>
            </div>
        </div>

        {{-- ── Row 3: Village ───────────────────────────────────────────── --}}
        <div x-show="hasLevel(4) && !isLastLevel(4)" class="border border-gray-100 rounded-xl overflow-hidden transition-opacity duration-200"
             :class="isActive('village') ? 'opacity-100 bg-white' : 'opacity-50 bg-gray-50 pointer-events-none'">

            <div @click="toggleRow('village')"
                 class="flex items-center justify-between px-6 py-4 select-none"
                 :class="isActive('village') ? 'cursor-pointer' : 'cursor-default'">
                <div class="flex items-center gap-3">
                    <span class="w-6 h-6 rounded-full text-xs flex items-center justify-center font-semibold flex-shrink-0 transition-colors duration-200"
                          :class="isActive('village') ? 'bg-blue-600 text-white' : 'bg-gray-200 text-gray-400'">5</span>
                    <span class="text-sm font-semibold transition-colors duration-200"
                          :class="isActive('village') ? 'text-gray-800' : 'text-gray-400'"
                          x-text="'Select ' + labelFor(4)"></span>
                </div>
                <svg :class="open.village ? 'rotate-180' : ''"
                     class="w-4 h-4 text-gray-400 transition-transform duration-200"
                     fill="none" viewBox="0 0 24 24">
                    <path d="M19 9l-7 7-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                </svg>
            </div>

            <div x-show="open.village && isActive('village')"
                 class="border-t border-gray-100 bg-gray-50/60 px-6 py-5 grid grid-cols-2 gap-x-6 gap-y-3">
                <label class="col-span-2 flex items-center gap-3 cursor-pointer pb-2 border-b border-gray-100">
                    <input type="checkbox"
                           :checked="getLevelItems(4).length > 0 && sel.village.length === getLevelItems(4).length"
                           @change="sel.village = $event.target.checked ? getLevelItems(4).map(d => d.key) : []"
                           class="w-4 h-4 rounded border-gray-300 accent-blue-600 cursor-pointer">
                    <span class="text-sm font-semibold text-gray-700">Select All</span>
                </label>
                <template x-for="item in getLevelItems(4)" :key="'lvl4-' + item.key">
                    <label class="flex items-start gap-3 cursor-pointer group">
                        <input type="checkbox" :value="item.key" x-model="sel.village"
                               class="mt-0.5 w-4 h-4 rounded border-gray-300 accent-blue-600 cursor-pointer">
                        <div class="flex flex-col gap-0.5">
                            <p class="text-sm font-medium text-gray-800 group-hover:text-blue-600 transition-colors" x-text="levelItemTitle(item)"></p>
                            <p x-show="item.parents && item.parents.length" class="text-[11px] text-gray-500 leading-snug" x-text="formatParentPipe(item)"></p>
                        </div>
                    </label>
                </template>
            </div>
        </div>

        {{-- ── Last level: quota + min count filter ─────────────────────── --}}
        <div x-show="selectedLevels.length > 0"
             class="bg-white border border-gray-100 rounded-xl overflow-hidden transition-opacity duration-200"
             :class="isLastLevelPanelActive() ? 'opacity-100' : 'opacity-50 pointer-events-none'">

            <div class="px-6 py-4 border-b border-gray-100 bg-gray-50/40">
                <div class="flex flex-wrap items-start justify-between gap-4">
                    <div>
                        <p class="text-[11px] font-bold uppercase tracking-widest text-gray-500" x-text="labelFor(lastLevelIndex)"></p>
                        <p class="text-xs text-gray-400 mt-0.5" x-text="hierarchyPipeLabel()"></p>
                    </div>
                    <div class="text-right">
                        <p class="text-[11px] text-gray-500">Ready to download</p>
                        <p class="text-2xl font-bold text-gray-900 leading-tight" x-text="totalQuotaSum"></p>
                        <p class="text-[10px] text-gray-400">Sum of selected quotas</p>
                    </div>
                </div>

                <div class="flex flex-wrap items-end gap-6 mt-4">
                    <div class="flex flex-col gap-1">
                        <label class="text-[11px] font-semibold text-gray-600">Min count</label>
                        <input type="number" min="0" x-model.number="minCount"
                            class="w-20 rounded-lg border border-gray-200 px-2.5 py-1.5 text-sm text-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500">
                    </div>
                    <div class="flex flex-col gap-1">
                        <label class="text-[11px] font-semibold text-gray-600">Default quota per item</label>
                        <input type="number" min="0" x-model.number="defaultQuotaPerItem"
                            class="w-20 rounded-lg border border-gray-200 px-2.5 py-1.5 text-sm text-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500">
                    </div>
                </div>
            </div>

            <div class="px-6 py-3 border-b border-gray-100 flex items-center justify-between">
                <label class="flex items-center gap-3 cursor-pointer">
                    <input type="checkbox"
                           :checked="allLastLevelFilteredSelected()"
                           @change="toggleSelectAllLastLevel($event.target.checked)"
                           class="w-4 h-4 rounded border-gray-300 accent-blue-600 cursor-pointer">
                    <span class="text-sm font-semibold text-gray-700">Select All</span>
                </label>
            </div>

            <div class="max-h-[420px] overflow-y-auto divide-y divide-gray-100">
                <template x-for="item in getFilteredLastLevelItems()" :key="'last-' + item.key">
                    <div class="flex items-center gap-4 px-6 py-4 hover:bg-gray-50/50">
                        <input type="checkbox"
                               :checked="isLastItemSelected(item.key)"
                               @change="toggleLastItem(item)"
                               class="w-4 h-4 rounded border-gray-300 accent-blue-600 cursor-pointer flex-shrink-0">

                        <div class="flex-1 min-w-0">
                            <p class="text-sm font-semibold text-gray-900" x-text="item.leaf.val"></p>
                            <p x-show="item.parents && item.parents.length" class="text-[11px] text-gray-500 truncate" x-text="formatParentPipe(item)"></p>
                        </div>

                        <div class="flex items-center gap-2 flex-shrink-0">
                            <template x-if="isLastItemSelected(item.key)">
                                <div class="flex items-center gap-1">
                                    <button type="button"
                                        @click="adjustQuota(item.key, -1, item.count)"
                                        class="w-8 h-8 rounded-lg border border-gray-200 text-gray-600 hover:bg-gray-100 font-bold leading-none">−</button>
                                    <span class="w-10 text-center text-sm font-bold text-gray-900" x-text="getQuota(item.key)"></span>
                                    <button type="button"
                                        @click="adjustQuota(item.key, 1, item.count)"
                                        :disabled="getQuota(item.key) >= item.count"
                                        class="w-8 h-8 rounded-lg border border-gray-200 text-gray-600 hover:bg-gray-100 font-bold leading-none disabled:opacity-40 disabled:cursor-not-allowed">+</button>
                                </div>
                            </template>
                            <template x-if="!isLastItemSelected(item.key)">
                                <span class="w-10 text-center text-sm text-gray-400">0</span>
                            </template>
                        </div>

                        <span class="text-sm font-semibold text-gray-700 w-10 text-right flex-shrink-0" x-text="item.count"></span>
                    </div>
                </template>
                <p x-show="getFilteredLastLevelItems().length === 0" class="px-6 py-8 text-sm text-gray-400 text-center">
                    No items match the minimum count filter.
                </p>
            </div>
        </div>

        {{-- ── Footer Bar ────────────────────────────────────────────────── --}}
        <div class="bg-white rounded-xl border border-gray-100 px-5 py-3 flex items-center justify-between">
            <span class="text-sm text-gray-600">
                <span x-show="selectedLevels.length > 0">Sum of selected quotas:</span>
                <span x-show="selectedLevels.length === 0">Selected Sample Records:</span>
                <span class="font-bold text-gray-900" x-text="totalRecords"></span>
            </span>
            <button
                type="button"
                @click="downloadManualSample()"
                :disabled="manualSamplingLoading || !csvRows.length || !selectedLevels.length || totalQuotaSum <= 0"
                :class="manualSamplingLoading || !csvRows.length || !selectedLevels.length || totalQuotaSum <= 0 ? 'bg-gray-400 cursor-not-allowed' : 'bg-[#2563EB] hover:opacity-90'"
                class="w-full md:w-auto md:self-start flex items-center justify-center gap-2 px-6 py-3.5 text-white rounded-lg text-[14px] font-bold transition-opacity mt-11"
            >
                <svg width="15" height="15" viewBox="0 0 24 24" fill="none">
                    <path d="M12 16V4M12 16L8 12M12 16L16 12M4 20h16" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
                <span x-text="manualSamplingLoading ? 'Downloading...' : 'Download'"></span>
            </button>
        </div>
        <p x-show="manualSamplingError" x-text="manualSamplingError" class="text-xs text-red-500 -mt-2"></p>

    </div>
    {{-- /sampler tab --}}

    {{-- ══ OTHER TABS ══════════════════════════════════════════════════════ --}}
    <div x-show="activeTab === 'appender'">
        @include('data-sampler.data-appender')
    </div>
    <div x-show="activeTab === 'cochran'">
        <div x-show="activeSampler === null">
           @include('data-sampler.cochran-calculator')
        </div>

        <div x-show="activeSampler === 'simple-random'">
           @include('data-sampler.simple-random')
        </div>

        <div x-show="activeSampler === 'sampler-stratified'">
           @include('data-sampler.sampler-stratified')
        </div>

        <div x-show="activeSampler === 'sampler-cluster'">
           @include('data-sampler.sampler-cluster')
        </div>

       <div x-show="activeSampler === 'sampler-systematic'">
           @include('data-sampler.sampler-systematic')
        </div>
    </div>

    <div x-show="activeTab === 'admin'">
        @include('data-sampler.admin')
    </div>
    

</div>

@endsection