{{-- resources/views/components/sampling-method-modal.blade.php --}}
{{-- Usage: <x-sampling-method-modal :sample-size="$result" /> --}}

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

<div
    x-data="{
        open: false,
        selected: null,
        methods: [
            {
                id: 'simple-random',
                label: 'Simple Random',
                description: 'Randomly pick n rows. Equal chance for everyone.',
                icon: 'simpleRandom',
                recommended: false,
            },
            {
                id: 'sampler-stratified',
                label: 'Stratified',
                description: 'Define groups (e.g., 60% male, 40% female) and sample each proportionally.',
                icon: 'stratified',
                recommended: true,
            },
            {
                id: 'sampler-cluster',
                label: 'Cluster',
                description: 'Randomly select clusters (districts, schools) then sample within them.',
                icon: 'cluster',
                recommended: false,
            },
            {
                id: 'sampler-systematic',
                label: 'Systematic',
                description: 'Pick every k-th person from an ordered list.',
                icon: 'systematic',
                recommended: false,
            },
        ]
    }"
    @open-sampling-modal.window="open = true; selected = null"
    style="font-family: 'Manrope', sans-serif;"
>

    {{-- Backdrop --}}
    <div
        x-show="open"
        x-transition:enter="transition ease-out duration-200"
        x-transition:enter-start="opacity-0"
        x-transition:enter-end="opacity-100"
        x-transition:leave="transition ease-in duration-150"
        x-transition:leave-start="opacity-100"
        x-transition:leave-end="opacity-0"
        @click="open = false"
        class="fixed inset-0 z-40"
        style="background: rgba(43, 52, 55, 0.45); backdrop-filter: blur(2px);"
    ></div>

    {{-- Modal --}}
    <div
        x-show="open"
        x-transition:enter="transition ease-out duration-200"
        x-transition:enter-start="opacity-0 scale-95 translate-y-2"
        x-transition:enter-end="opacity-100 scale-100 translate-y-0"
        x-transition:leave="transition ease-in duration-150"
        x-transition:leave-start="opacity-100 scale-100 translate-y-0"
        x-transition:leave-end="opacity-0 scale-95 translate-y-2"
        class="fixed inset-0 z-50 flex items-center justify-center px-4"
        style="pointer-events: none;"
    >
        <div
            class="w-full bg-white rounded-2xl shadow-2xl flex flex-col overflow-hidden"
            style="max-width: 520px; pointer-events: all; box-shadow: 0 20px 60px rgba(0,0,0,0.15), 0 4px 16px rgba(0,0,0,0.08);"
        >
            {{-- Header --}}
            <div class="px-7 pt-7 pb-5 flex flex-col gap-1.5 relative">
                <button
                    @click="open = false"
                    class="absolute top-6 right-6 w-8 h-8 rounded-full flex items-center justify-center text-[#586064] hover:bg-[#F1F4F6] transition-colors"
                >
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                        <path d="M18 6L6 18M6 6l12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                    </svg>
                </button>
                <h2 class="text-[20px] font-extrabold text-[#2B3437] leading-tight pr-8">Choose a Sampling Method</h2>
                <div class="flex items-center gap-1.5">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
                        <circle cx="12" cy="12" r="9" stroke="#005AC2" stroke-width="1.5"/>
                        <path d="M12 8v4M12 16h.01" stroke="#005AC2" stroke-width="1.5" stroke-linecap="round"/>
                    </svg>
                    <span class="text-[12px] font-semibold text-[#005AC2]">
                        Required sample size: <span x-text="$store?.sampleSize ?? 385">385</span>
                    </span>
                </div>
            </div>

            {{-- Methods List --}}
            <div class="px-7 pb-4 flex flex-col gap-3">
                <template x-for="method in methods" :key="method.id">
                    <div class="relative">
                        {{-- Recommended Badge --}}
                        <div
                            x-show="method.recommended"
                            class="absolute -top-[11px] right-4 z-10 px-3 py-[3px] rounded-full text-[10px] font-extrabold tracking-[0.08em] uppercase text-white"
                            style="background: #005AC2; letter-spacing: 0.09em;"
                        >RECOMMENDED</div>

                        {{-- Method Row --}}
                        <button
                            @click="selected = method.id"
                            :class="selected === method.id
                                ? 'border-[#005AC2] bg-[#F0F6FF]'
                                : 'border-[#E4E8EA] bg-white hover:border-[#ABB3B7] hover:bg-[#FAFBFB]'"
                            class="w-full flex items-center gap-4 px-4 py-4 rounded-xl border-2 transition-all duration-150 text-left"
                        >
                            {{-- Icon Box --}}
                            <div
                                :class="selected === method.id ? 'bg-[#005AC2]' : 'bg-[#EEF3F8]'"
                                class="w-11 h-11 rounded-xl flex items-center justify-center flex-shrink-0 transition-colors duration-150"
                            >
                                {{-- Simple Random --}}
                                <template x-if="method.icon === 'simpleRandom'">
                                    <img
                                        src="{{ asset('assets/media/icons/simpleRandom.svg') }}"
                                        class="w-5 h-5 transition-all duration-150"
                                        :class="selected === method.id ? 'brightness-0 invert' : ''"
                                    >
                                </template>
                                {{-- Stratified --}}
                                <template x-if="method.icon === 'stratified'">
                                    <img
                                        src="{{ asset('assets/media/icons/stratified.svg') }}"
                                        class="w-5 h-5 transition-all duration-150"
                                        :style="selected === method.id
            ? 'filter: brightness(0) invert(1)'
            : 'filter: invert(35%) sepia(80%) saturate(500%) hue-rotate(190deg) brightness(90%)'"
                                    >
                                </template>
                                {{-- Cluster --}}
                                <template x-if="method.icon === 'cluster'">
                                    <img
                                        src="{{ asset('assets/media/icons/cluster.svg') }}"
                                        class="w-5 h-5 transition-all duration-150"
                                        :class="selected === method.id ? 'brightness-0 invert' : ''"
                                    >
                                </template>
                                {{-- Systematic --}}
                                <template x-if="method.icon === 'systematic'">
                                    <img
                                        src="{{ asset('assets/media/icons/systematic.svg') }}"
                                        class="w-5 h-5 transition-all duration-150"
                                        :class="selected === method.id ? 'brightness-0 invert' : ''"
                                    >
                                </template>
                            </div>

                            {{-- Text --}}
                            <div class="flex-1 min-w-0">
                                <p
                                    :class="selected === method.id ? 'text-[#005AC2]' : 'text-[#2B3437]'"
                                    class="text-[14px] font-bold leading-snug transition-colors duration-150"
                                    x-text="method.label"
                                ></p>
                                <p class="text-[12px] text-[#586064] leading-relaxed mt-0.5" x-text="method.description"></p>
                            </div>

                            {{-- Chevron --}}
                            <svg
                                :class="selected === method.id ? 'text-[#005AC2]' : 'text-[#ABB3B7]'"
                                class="w-4 h-4 flex-shrink-0 transition-colors duration-150"
                                fill="none" viewBox="0 0 24 24"
                            >
                                <path d="M9 18l6-6-6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </button>
                    </div>
                </template>
            </div>

            {{-- Footer --}}
            <div class="px-7 py-5 flex items-center justify-between gap-3 border-t border-[#ABB3B7]/20 bg-[#FAFBFB]">
                <button
                    @click="open = false"
                    class="px-6 py-3 rounded-lg text-[14px] font-bold text-[#586064] hover:bg-[#F1F4F6] transition-colors"
                >Cancel</button>

                <button
                    @click="if(selected) { $dispatch('sampling-method-selected', { method: selected }); open = false; }"
                    :disabled="!selected"
                    :class="selected
                        ? 'bg-[#005AC2] hover:opacity-90 cursor-pointer'
                        : 'bg-[#ABB3B7] cursor-not-allowed opacity-60'"
                    class="px-6 py-3 rounded-lg text-[14px] font-bold text-white transition-all duration-150 flex items-center gap-2"
                >
                    Confirm Selection
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
                        <path d="M5 12h14M13 6l6 6-6 6" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                </button>
            </div>

        </div>
    </div>
</div>