{{-- resources/views/data-sampler/simple-random.blade.php --}}
{{-- Included from index.blade.php when activeSampler === 'simple_random' --}}

<div
    style="font-family: 'Manrope', sans-serif;"
    x-data="{
        fileName: null,
        fileRows: null,
        fileCols: null,
        fileSize: null,
        columns: [],
        detectedColumns: [],
        uuidColumn: '',
        runBy: '',
        outputFormat: 'excel',
        randomSeed: '8821',
        sampleSize: 385,

        // ── Stratification Groups ─────────────────────────────────────────
        stratGroups: [
            { column: 'region_code', targetValue: '', weight: 0.0 }
        ],

        get totalWeight() {
            return this.stratGroups
                .reduce((sum, g) => sum + (parseFloat(g.weight) || 0), 0)
                .toFixed(1);
        },

        get isWeightValid() {
            return Math.abs(parseFloat(this.totalWeight) - 100) < 0.01;
        },

        addGroup() {
            this.stratGroups.push({
                column: this.columns[0] || 'region_code',
                targetValue: '',
                weight: 0.0
            });
        },

        removeGroup(index) {
            if (this.stratGroups.length > 1) {
                this.stratGroups.splice(index, 1);
            }
        },
        // ─────────────────────────────────────────────────────────────────

        handleFile(event) {
            const file = event.target.files[0];
            if (!file) return;
            this.fileName = file.name;
            this.fileSize = (file.size / 1024).toFixed(0) + ' KB';
            const reader = new FileReader();
            reader.onload = (e) => {
                const lines = e.target.result.split('\n').filter(l => l.trim());
                this.fileRows = lines.length - 1;
                const headers = lines[0].split(',').map(h => h.trim().replace(/\x22/g, ''));
                this.fileCols = headers.length;
                this.detectedColumns = headers;
                this.columns = headers;
                this.uuidColumn = headers.includes('submission_uuid')
                    ? 'submission_uuid'
                    : headers[0] || '';
            };
            reader.readAsText(file);
        },

        removeFile() {
            this.fileName = null;
            this.fileRows = null;
            this.fileCols = null;
            this.fileSize = null;
            this.detectedColumns = [];
            this.columns = [];
            this.uuidColumn = '';
        }
    }"
>

    {{-- ── Header Bar ─────────────────────────────────────────────────────── --}}
    <div class="bg-white rounded-2xl border border-[#e2e6ea] px-6 py-[18px] flex items-center justify-between mb-4">
        <div class="flex flex-col gap-0.5">
            <div class="flex items-center gap-2.5">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
                    <circle cx="12" cy="12" r="9.5" stroke="#2563EB" stroke-width="1.8"/>
                    <path d="M12 11v5" stroke="#2563EB" stroke-width="1.8" stroke-linecap="round"/>
                    <circle cx="12" cy="7.5" r="1" fill="#2563EB"/>
                </svg>
                <span class="text-[16px] font-bold text-[#1c2b3a]">Simple Random Sample</span>
            </div>
            <span class="text-[13px] text-[#7a8694] pl-[27px]">n=<span x-text="sampleSize">385</span></span>
        </div>
        <button
            @click="$dispatch('reset-sampler')"
            class="flex items-center gap-2 px-[22px] py-[11px] rounded-full bg-[#D6E4FF] text-[#1a4fc4] text-[13px] font-bold tracking-[0.05em] border-none hover:bg-[#c0d4f7] transition-all duration-150"
        >
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none">
                <path d="M12 15a3 3 0 100-6 3 3 0 000 6z" stroke="#1a4fc4" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z" stroke="#1a4fc4" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            CHANGE METHOD
        </button>
    </div>


        {{-- ── LEFT COLUMN ─────────────────────────────────────────────────── --}}

            {{-- Upload Dataset Card --}}
            <div class="bg-white rounded-xl border border-[#C3C6D7]/20 p-6 flex flex-col gap-5 lg:col-span-2">

                <p class="text-[11px] font-bold uppercase tracking-[0.09em] text-[#586064]">Upload Dataset</p>

                {{-- Hidden file input --}}
                <input type="file" x-ref="fileInput" accept=".csv" class="hidden" @change="handleFile($event)">

                {{-- Empty state --}}
                <div
                    x-show="!fileName"
                    class="border-2 border-dashed border-[#C3C6D7]/40 rounded-xl py-8 flex flex-col items-center gap-3 hover:border-[#2563EB]/40 hover:bg-[#F8FBFF] transition-all cursor-pointer"
                    @click="$refs.fileInput.click()"
                >
                    <div class="w-10 h-10 rounded-full bg-[#EFF4FF] flex items-center justify-center">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
                            <path d="M12 15V4M12 4L8.5 7.5M12 4L15.5 7.5" stroke="#004AC6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M4 17V19C4 19.5523 4.44772 20 5 20H19C19.5523 20 20 19.5523 20 19V17" stroke="#004AC6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </div>
                    <div class="text-center">
                        <p class="text-[13px] font-semibold text-[#0D1C2E]">Drop your CSV here</p>
                        <p class="text-[11px] text-[#C3C6D7] mt-0.5">or click to browse</p>
                    </div>
                    <button type="button" class="px-4 py-1.5 bg-[#2563EB] text-white text-[12px] font-bold rounded-lg hover:opacity-90 transition-opacity">
                        Choose File
                    </button>
                </div>

                {{-- File uploaded state --}}
                <div x-show="fileName" class="flex items-center justify-between gap-4">
                    <div class="flex items-center gap-3">
                        <div class="w-9 h-9 rounded-lg bg-[#EFF4FF] flex items-center justify-center flex-shrink-0">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                                <path d="M14 2H6C4.89543 2 4 2.89543 4 4V20C4 21.1046 4.89543 22 6 22H18C19.1046 22 20 21.1046 20 20V8L14 2Z" stroke="#004AC6" stroke-width="1.5" stroke-linejoin="round"/>
                                <path d="M14 2V8H20" stroke="#004AC6" stroke-width="1.5" stroke-linejoin="round"/>
                            </svg>
                        </div>
                        <div>
                            <p class="text-[13px] font-bold text-[#0D1C2E]" x-text="fileName"></p>
                            <p class="text-[11px] text-[#586064]">
                                <span x-text="fileRows"></span> rows,
                                <span x-text="fileCols"></span> columns •
                                <span x-text="fileSize"></span>
                            </p>
                        </div>
                    </div>
                    <div class="flex items-center gap-2">
                        <button @click.stop="$refs.fileInput.click()" type="button"
                            class="px-3 py-1.5 bg-[#2563EB] text-white text-[11px] font-bold rounded-lg hover:opacity-90 transition-opacity flex items-center gap-1.5">
                            <svg width="11" height="11" viewBox="0 0 24 24" fill="none">
                                <path d="M12 15V4M12 4L8.5 7.5M12 4L15.5 7.5" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M4 17V19C4 19.5523 4.44772 20 5 20H19C19.5523 20 20 19.5523 20 19V17" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                            Choose File
                        </button>
                        <button @click.stop="removeFile()" type="button"
                            class="w-7 h-7 flex items-center justify-center rounded-lg text-[#C3C6D7] hover:text-red-500 hover:bg-red-50 transition-all">
                            <svg width="13" height="13" 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>

                {{-- Detected Columns — shown only when columns exist --}}
                <div x-show="detectedColumns.length > 0" class="flex flex-col gap-2">
                    <p class="text-[11px] font-bold uppercase tracking-[0.09em] text-[#586064]">Detected Columns</p>
                    <div class="flex flex-wrap gap-1.5">
                        <template x-for="col in detectedColumns" :key="col">
                            <span class="px-2.5 py-1 bg-[#F1F4F6] rounded-md text-[11px] font-semibold text-[#0D1C2E]" x-text="col"></span>
                        </template>
                    </div>
                </div>

                {{-- Default columns shown when no file uploaded --}}
                <div x-show="detectedColumns.length === 0" class="flex flex-col gap-2">
                    <p class="text-[11px] font-bold uppercase tracking-[0.09em] text-[#586064]">Detected Columns</p>
                    <div class="flex flex-wrap gap-1.5">
                        @foreach(['submission_id', 'submission_uuid', 'district', 'starttime', 'endtime', 'household_code'] as $col)
                        <span class="px-2.5 py-1 bg-[#F1F4F6] rounded-md text-[11px] font-semibold text-[#0D1C2E]">{{ $col }}</span>
                        @endforeach
                    </div>
                </div>

            </div>
            {{-- End Upload Dataset Card --}}



    {{-- ══════════════════════════════════════════════════════════════════════ --}}
    {{-- ── Stratification Groups ──────────────────────────────────────────── --}}
    {{-- ══════════════════════════════════════════════════════════════════════ --}}
    <div class="bg-white rounded-xl border border-[#e2e6ea] mt-5 overflow-hidden">

        {{-- Card Header --}}
        <div class="px-6 pt-6 pb-5">
            <h3 class="text-[15px] font-bold text-[#0D1C2E] leading-tight">Stratification Groups</h3>
            <p class="text-[13px] text-[#586064] mt-1 leading-snug">
                Define how to split your sample. Each row = one group. Percentages must sum to 100%.
            </p>
        </div>

        {{-- Divider --}}
        <div class="h-px bg-[#F1F4F6]"></div>

        {{-- Column Headers --}}
        <div class="grid gap-4 px-6 pt-5 pb-3" style="grid-template-columns: 1fr 1fr 140px 36px;">
            <span class="text-[10px] font-extrabold uppercase tracking-[0.1em] text-[#586064]">Column</span>
            <span class="text-[10px] font-extrabold uppercase tracking-[0.1em] text-[#586064]">Target Value</span>
            <span class="text-[10px] font-extrabold uppercase tracking-[0.1em] text-[#586064]">Weight (%)</span>
            <span></span>
        </div>

        {{-- Group Rows --}}
        <div class="flex flex-col gap-3 px-6 pb-4">
            <template x-for="(group, index) in stratGroups" :key="index">
                <div class="grid gap-4 items-center" style="grid-template-columns: 1fr 1fr 140px 36px;">

                    {{-- Column Dropdown --}}
                    <div class="relative">
                        <select
    x-model="group.column"
    class="w-full bg-white border border-[#ABB3B7]/40 rounded-lg px-3.5 py-2.5 text-[13px] text-[#2B3437] font-medium outline-none focus:border-[#2563EB]/50 cursor-pointer transition-all duration-150"
>
                            {{-- If columns loaded from CSV, show those; else show fallback options --}}
                            <template x-if="columns.length > 0">
                                <template x-for="col in columns" :key="col">
                                    <option :value="col" x-text="col"></option>
                                </template>
                            </template>
                            <template x-if="columns.length === 0">
                                <template x-for="col in ['region_code', 'submission_id', 'submission_uuid', 'district', 'starttime', 'endtime', 'household_code']" :key="col">
                                    <option :value="col" x-text="col"></option>
                                </template>
                            </template>
                        </select>
                        <svg class="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none w-3.5 h-3.5 text-[#586064]" fill="none" viewBox="0 0 24 24">
                            <path d="M19 9l-7 7-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </div>

                    {{-- Target Value --}}
                    <input
                        type="text"
                        x-model="group.targetValue"
                        placeholder="e.g. US-WEST"
                        class="w-full bg-[#F1F4F6] border border-transparent hover:border-[#ABB3B7]/40 focus:border-[#2563EB]/50 focus:bg-white rounded-lg px-3.5 py-2.5 text-[13px] text-[#2B3437] outline-none placeholder-[#C3C6D7] transition-all duration-150"
                    >

                    {{-- Weight (%) --}}
                    <input
                        type="number"
                        x-model="group.weight"
                        min="0"
                        max="100"
                        step="0.1"
                        placeholder="0.0"
                        class="w-full bg-[#EFF4FF] border border-[#2563EB]/20 hover:border-[#2563EB]/40 focus:border-[#2563EB] focus:bg-white rounded-lg px-3.5 py-2.5 text-[13px] text-[#2563EB] font-bold outline-none text-center transition-all duration-150"
                    >

                    {{-- Delete Button --}}
                    <button
                        type="button"
                        @click="removeGroup(index)"
                        :disabled="stratGroups.length === 1"
                        class="w-9 h-9 flex items-center justify-center rounded-lg text-[#C3C6D7] hover:text-red-500 hover:bg-red-50 disabled:opacity-30 disabled:cursor-not-allowed disabled:hover:text-[#C3C6D7] disabled:hover:bg-transparent transition-all duration-150"
                    >
                        <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>
            </template>
        </div>

        {{-- Add Group Button --}}
        <div class="px-6 pb-5">
            <button
                type="button"
                @click="addGroup()"
                class="w-full py-3 rounded-xl border-2 border-dashed border-[#2563EB]/30 text-[#2563EB] text-[13px] font-bold flex items-center justify-center gap-2 hover:border-[#2563EB]/60 hover:bg-[#F8FBFF] transition-all duration-150"
            >
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
                    <path d="M12 5v14M5 12h14" stroke="#2563EB" stroke-width="2.5" stroke-linecap="round"/>
                </svg>
                Add Group
            </button>
        </div>

        {{-- Divider --}}
        <div class="h-px bg-[#F1F4F6]"></div>

        {{-- Total / Validation Footer --}}
        <div
            class="mx-6 my-4 rounded-xl px-4 py-3.5 flex items-start gap-3 transition-all duration-200"
            :class="isWeightValid
                ? 'bg-[#F0FDF4] border border-[#86EFAC]/40'
                : 'bg-[#FFFBEB] border border-[#FCD34D]/40'"
        >
            {{-- Warning Icon --}}
            <div
                x-show="!isWeightValid"
                class="w-8 h-8 rounded-full bg-[#FEF3C7] flex items-center justify-center flex-shrink-0 mt-0.5"
            >
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
                    <path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" stroke="#D97706" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M12 9v4M12 17h.01" stroke="#D97706" stroke-width="1.8" stroke-linecap="round"/>
                </svg>
            </div>

            {{-- Valid Icon --}}
            <div
                x-show="isWeightValid"
                class="w-8 h-8 rounded-full bg-[#DCFCE7] flex items-center justify-center flex-shrink-0 mt-0.5"
            >
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
                    <path d="M20 6L9 17l-5-5" stroke="#16A34A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </div>

            {{-- Message --}}
            <div class="flex flex-col gap-0.5">
                <p
                    class="text-[13px] font-bold"
                    :class="isWeightValid ? 'text-[#15803D]' : 'text-[#92400E]'"
                >
                    Total: <span x-text="totalWeight + '%'">0.0%</span>
                </p>
                <p
                    class="text-[12px]"
                    :class="isWeightValid ? 'text-[#16A34A]' : 'text-[#B45309]'"
                    x-text="isWeightValid
                        ? 'Configuration is valid. Ready to proceed.'
                        : 'Configuration must sum to exactly 100% to proceed.'"
                ></p>
            </div>
        </div>

    </div>
    {{-- ── END Stratification Groups ───────────────────────────────────────── --}}


    {{-- ── Run Configurations ──────────────────────────────────────────────── --}}
    <div class="bg-white rounded-xl border border-[#ABB3B7]/20 p-6 flex flex-col gap-5 mt-5">

        <div class="flex items-center gap-2">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
                <path d="M4 6H20M4 12H14M4 18H9" stroke="#586064" stroke-width="2" stroke-linecap="round"/>
            </svg>
            <p class="text-[11px] font-bold uppercase tracking-[0.09em] text-[#586064]">Run Configurations</p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-5">

            {{-- UUID/ID Column --}}
            <div class="flex flex-col gap-2">
                <label class="text-[13px] font-bold text-[#2B3437]">UUID/ID Column</label>
                <div class="relative">
                    <select
                        x-model="uuidColumn"
                        class="w-full bg-white border border-[#ABB3B7]/40 rounded-md px-3.5 py-2.5 text-[13px] text-[#2B3437] outline-none focus:border-[#005AC2] cursor-pointer"
                    >
                        <option value="">Select column...</option>
                        <template x-for="col in columns" :key="col">
                            <option :value="col" x-text="col"></option>
                        </template>
                    </select>
                    <svg class="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none w-3.5 h-3.5 text-[#586064]" 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>

            {{-- Run By --}}
            <div class="flex flex-col gap-2">
                <label class="text-[13px] font-bold text-[#2B3437]">Run By</label>
                <input
                    type="text"
                    x-model="runBy"
                    placeholder="Lead Researcher"
                    class="w-full bg-[#F1F4F6] rounded-lg px-3.5 py-2.5 text-[13px] text-[#2B3437] border-none outline-none placeholder-[#ABB3B7]"
                >
            </div>

            {{-- Output Format --}}
            <div class="flex flex-col gap-2">
                <label class="text-[13px] font-bold text-[#2B3437]">Output Format</label>
                <div class="flex rounded-lg overflow-hidden border border-[#ABB3B7]/20">
                    <button
                        type="button"
                        @click="outputFormat = 'excel'"
                        :class="outputFormat === 'excel' ? 'bg-white text-[#2563EB] font-bold shadow-sm' : 'bg-[#F1F4F6] text-[#586064] font-semibold'"
                        class="flex-1 py-2.5 text-[13px] transition-all duration-150"
                    >Excel</button>
                    <button
                        type="button"
                        @click="outputFormat = 'csv'"
                        :class="outputFormat === 'csv' ? 'bg-white text-[#2563EB] font-bold shadow-sm' : 'bg-[#F1F4F6] text-[#586064] font-semibold'"
                        class="flex-1 py-2.5 text-[13px] transition-all duration-150"
                    >CSV</button>
                </div>
            </div>

            {{-- Random Seed --}}
            <div class="flex flex-col gap-2">
                <label class="text-[13px] font-bold text-[#2B3437]">Random Seed</label>
                <input
                    type="number"
                    x-model="randomSeed"
                    placeholder="8821"
                    class="w-full bg-[#F1F4F6] rounded-lg px-3.5 py-2.5 text-[13px] text-[#2B3437] border-none outline-none placeholder-[#ABB3B7]"
                >
            </div>

        </div>

        {{-- Ready to Download --}}
        <button
            type="button"
            class="w-full md:w-auto md:self-start flex items-center justify-center gap-2 px-6 py-3.5 bg-[#2563EB] hover:opacity-90 text-white rounded-lg text-[14px] font-bold transition-opacity mt-1"
        >
            <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>
            Ready to Download
        </button>

    </div>
    {{-- ── END Run Configurations ───────────────────────────────────────────── --}}

</div>
{{-- ── END x-data root ─────────────────────────────────────────────────────── --}}