{{-- 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,

        clusterSelectMode: 'auto',
        clusterColumn: '',
        minRowsPerCluster: 10,
        maxClustersToPick: '',

        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] || '';
                this.clusterColumn = headers.includes('district')
                    ? 'district'
                    : headers[0] || '';
            };
            reader.readAsText(file);
        },

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

    {{-- ── 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>

    {{-- ── TWO-COLUMN GRID ─────────────────────────────────────────────────── --}}

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

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

                <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 --}}


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

        {{-- Header Row --}}
        <div class="flex items-center justify-between flex-wrap gap-3">
            <h3 class="text-[15px] font-bold text-[#0D1C2E]">Cluster Settings</h3>

            {{-- Auto / Manual toggle --}}
            <div class="flex rounded-lg overflow-hidden border border-[#e2e6ea]">
                <button
                    type="button"
                    @click="clusterSelectMode = 'auto'"
                    :class="clusterSelectMode === 'auto'
                        ? 'bg-[#2563EB] text-white font-bold'
                        : 'bg-white text-[#434655] font-semibold hover:bg-gray-50'"
                    class="px-5 py-2 text-[13px] transition-all duration-150"
                >Auto Select</button>
                <button
                    type="button"
                    @click="clusterSelectMode = 'manual'"
                    :class="clusterSelectMode === 'manual'
                        ? 'bg-[#2563EB] text-white font-bold'
                        : 'bg-white text-[#434655] font-semibold hover:bg-gray-50'"
                    class="px-5 py-2 text-[13px] transition-all duration-150"
                >Manual Select</button>
            </div>
        </div>

        {{-- Two inputs side by side --}}
        <div class="grid grid-cols-1 md:grid-cols-2 gap-5">

            {{-- Cluster Column --}}
            <div class="flex flex-col gap-2">
                <label class="text-[11px] font-bold uppercase tracking-[0.09em] text-[#586064]">Cluster Column</label>
                <div class="relative">
                    <select
                        x-model="clusterColumn"
                        class="w-full bg-white border border-[#e2e6ea] rounded-lg px-4 py-3 text-[13px] text-[#2B3437] outline-none focus:border-[#2563EB] cursor-pointer transition-colors"
                    >
                        <option value="">Select column...</option>
                        <template x-for="col in columns" :key="col">
                            <option :value="col" x-text="col"></option>
                        </template>
                        {{-- Fallback option when no file uploaded --}}
                        <option x-show="columns.length === 0" value="district">district</option>
                    </select>
                    <svg class="absolute right-3.5 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>

            {{-- Min Rows Per Cluster --}}
            <div class="flex flex-col gap-2">
                <label class="text-[11px] font-bold uppercase tracking-[0.09em] text-[#586064]">Min Rows Per Cluster</label>
                <input
                    type="number"
                    x-model="minRowsPerCluster"
                    placeholder="10"
                    min="1"
                    class="w-full bg-white border border-[#e2e6ea] rounded-lg px-4 py-3 text-[13px] text-[#2B3437] outline-none focus:border-[#2563EB] transition-colors placeholder-[#ABB3B7]"
                >
            </div>

        </div>

        {{-- Max Clusters To Pick — full width --}}
        <div class="flex flex-col gap-2">
            <label class="text-[11px] font-bold uppercase tracking-[0.09em] text-[#586064]">Max Clusters To Pick</label>
            <input
                type="text"
                x-model="maxClustersToPick"
                placeholder="All eligible"
                class="w-full bg-white border border-[#e2e6ea] rounded-lg px-4 py-3 text-[13px] text-[#2B3437] outline-none focus:border-[#2563EB] transition-colors placeholder-[#ABB3B7]"
            >
        </div>

        {{-- Helper text --}}
        <p class="text-[12px] text-[#7a8694] leading-relaxed -mt-1">
            Clusters with fewer than the minimum rows are excluded. Then clusters are randomly selected and sampled proportionally.
        </p>

        {{-- Load & Preview Clusters button --}}
        <button
            type="button"
            class="w-full flex items-center justify-center gap-2.5 py-4 rounded-xl bg-[#EEF2FF] hover:bg-[#E0E8FF] text-[#2563EB] text-[14px] font-bold transition-all duration-150"
        >
            <svg width="17" height="17" viewBox="0 0 24 24" fill="none">
                <path d="M21 12a9 9 0 11-9-9" stroke="#2563EB" stroke-width="2" stroke-linecap="round"/>
                <path d="M21 3v5h-5" stroke="#2563EB" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            Load &amp; Preview Clusters
        </button>

    </div>
    {{-- ── END CLUSTER SETTINGS ────────────────────────────────────────────── --}}


        {{-- ── RIGHT COLUMN: 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 RIGHT COLUMN ────────────────────────────────────────────── --}}

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