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

@section('content')
<div
    class="flex flex-col gap-5 py-6"
    style="font-family: 'Manrope', sans-serif;"
    x-data="{
        activeTab: 'sampler',
        activeSampler: null,

        get activeDepth() {
            if (this.sel.deh.length > 0)      return 'village';
            if (this.sel.uc.length > 0)       return 'deh';
            if (this.sel.tehsil.length > 0)   return 'uc';
            if (this.sel.district.length > 0) return 'tehsil';
            return 'district';
        },

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

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

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

        districts: [
            { id:1, name:'Bahawalpur City', sub:'Hyderabad • Population: 1,420' },
            { id:2, name:'Hasilpur',        sub:'Hyderabad • Population: 1,420' },
            { id:3, name:'Yazman',          sub:'Hyderabad • Population: 1,420' },
        ],
        tehsils: [
            { id:1, name:'Ahmedpur East' },
            { id:2, name:'Khairpur Tamewali' },
            { id:3, name:'Liaquatpur' },
        ],
        ucs: [
            { id:1, name:'Bahawalpur City', sub:'ID: #VL-8821 • Population: 1,420' },
            { id:2, name:'Hasilpur',        sub:'' },
            { id:3, name:'Yazman',          sub:'' },
        ],
        dehs: [
            { id:1, name:'Ahmedpur East' },
            { id:2, name:'Khairpur Tamewali' },
            { id:3, name:'Liaquatpur' },
        ],
        villages: [
            { id:1, name:'Village A' },
            { id:2, name:'Village B' },
            { id:3, name:'Village C' },
        ],

        isActive(step) {
            const map = {
                district: true,
                tehsil:   this.sel.district.length > 0,
                uc:       this.sel.tehsil.length   > 0,
                deh:      this.sel.uc.length        > 0,
                village:  this.sel.deh.length       > 0,
            };
            return map[step];
        },

        onSelect(step) {
            if (step === 'district') {
                this.sel.tehsil = []; this.sel.uc = []; this.sel.deh = []; this.sel.village = [];
            }
            if (step === 'tehsil') {
                this.sel.uc = []; this.sel.deh = []; this.sel.village = [];
            }
            if (step === 'district' || step === 'tehsil') {
                if (this.sel.district.length > 0 && this.sel.tehsil.length > 0) {
                    this.open.row1 = false;
                    this.open.row2 = true;
                }
            }
            if (step === 'uc' || step === 'deh') {
                this.open.village = this.sel.deh.length > 0;
                if (this.sel.uc.length > 0 && this.sel.deh.length > 0) {
                    this.open.row2 = 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() {
            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;
        }
    }"
    
    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(['sampler' => 'Data Sampler', 'appender' => 'Data Appender', 'cochran' => 'Cochran Calculator', 'admin' => 'Admin'] 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
    </div>

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

        {{-- ── 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>
                    <input type="text" placeholder="Search 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">
                </div>
                <div class="flex flex-col gap-1.5">
                    <label class="text-[11px] uppercase tracking-widest text-[#94A3B8] font-medium">General Search</label>
                    <input type="text" placeholder="General search..."
                        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">
                </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 class="grid grid-cols-5 rounded-lg overflow-hidden border border-gray-200">
                    @foreach(['district' => 'District', 'tehsil' => 'Tehsil', 'uc' => 'UC', 'deh' => 'Deh', 'village' => 'Village'] as $key => $label)
                    <button
                        :class="activeDepth === '{{ $key }}'
                            ? 'bg-blue-50 text-blue-600 font-semibold'
                            : isCompleted('{{ $key }}')
                                ? 'bg-gray-50 text-blue-500 font-medium'
                                : 'bg-white text-gray-300 font-medium cursor-default'"
                        class="py-2.5 text-center text-sm transition-colors {{ !$loop->last ? 'border-r border-gray-200' : '' }}">
                        {{ $label }}
                    </button>
                    @endforeach
                </div>
            </div>
        </div>

        {{-- ── 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"
                onclick="document.getElementById('fileInput').click()">

                {{-- Upload spinner overlay --}}
                <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 file-name">No file chosen</p>
                <input type="file" id="fileInput" accept=".csv" class="hidden"
    @change="
        let file = $event.target.files[0];
        if(file){
            document.querySelectorAll('.file-name').forEach(el => el.textContent = file.name);
            document.getElementById('uploadSplash').classList.remove('hidden');
            setTimeout(() => document.getElementById('uploadSplash').classList.add('hidden'), 1500);
        }
    ">
                <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">
                    Replace File
                </button>
                <input type="file" id="fileInput" accept=".csv" class="hidden">
            </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 class="file-name">No file chosen</span>
                    </span>
                    <span>24 rows</span>
                    <span>365 columns</span>
                </div>
                <button type="button" class="text-red-400 hover:text-red-600 transition-colors">
                    <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>

        {{-- ── Row 1: District + Tehsil ─────────────────────────────────── --}}
        <div 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">Select District</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 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'">Select Tehsil</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 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="sel.district.length === districts.length"
                               @change="sel.district = $event.target.checked ? districts.map(d => d.id) : []"
                               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 districts" :key="item.id">
                        <label class="flex items-start gap-3 cursor-pointer group">
                            <input type="checkbox" :value="item.id" 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>
                                <p class="text-sm font-medium text-gray-800 leading-tight group-hover:text-blue-600 transition-colors" x-text="item.name"></p>
                                <p class="text-xs text-gray-400 mt-0.5" x-text="item.sub"></p>
                            </div>
                        </label>
                    </template>
                </div>

                <div class="self-stretch w-px transition-colors duration-200"
                     :class="sel.tehsil.length > 0 ? 'bg-blue-300' : 'bg-gray-200'"></div>

                {{-- Tehsil list --}}
                <div 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="sel.tehsil.length === tehsils.length"
                               @change="sel.tehsil = $event.target.checked ? tehsils.map(d => d.id) : []"
                               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 tehsils" :key="item.id">
                        <label class="flex items-center gap-3 cursor-pointer group">
                            <input type="checkbox" :value="item.id" x-model="sel.tehsil"
                                   @change="onSelect('tehsil')"
                                   class="w-4 h-4 rounded border-gray-300 accent-blue-600 cursor-pointer">
                            <span class="text-sm font-medium text-gray-800 group-hover:text-blue-600 transition-colors" x-text="item.name"></span>
                        </label>
                    </template>
                </div>
            </div>
        </div>

        {{-- ── Row 2: UC + Deh ──────────────────────────────────────────── --}}
        <div 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'">Select UC</span>
                </div>

                <div 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'">Select Deh</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 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="sel.uc.length === ucs.length"
                               @change="sel.uc = $event.target.checked ? ucs.map(d => d.id) : []"
                               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 ucs" :key="item.id">
                        <label class="flex items-start gap-3 cursor-pointer group">
                            <input type="checkbox" :value="item.id" 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>
                                <p class="text-sm font-medium text-gray-800 leading-tight group-hover:text-blue-600 transition-colors" x-text="item.name"></p>
                                <p class="text-xs text-gray-400 mt-0.5" x-text="item.sub"></p>
                            </div>
                        </label>
                    </template>
                </div>

                <div class="self-stretch w-px transition-colors duration-200"
                     :class="sel.deh.length > 0 ? 'bg-blue-300' : 'bg-gray-200'"></div>

                {{-- Deh list --}}
                <div 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="sel.deh.length === dehs.length"
                               @change="sel.deh = $event.target.checked ? dehs.map(d => d.id) : []"
                               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 dehs" :key="item.id">
                        <label class="flex items-center gap-3 cursor-pointer group">
                            <input type="checkbox" :value="item.id" x-model="sel.deh"
                                   @change="onSelect('deh')"
                                   class="w-4 h-4 rounded border-gray-300 accent-blue-600 cursor-pointer">
                            <span class="text-sm font-medium text-gray-800 group-hover:text-blue-600 transition-colors" x-text="item.name"></span>
                        </label>
                    </template>
                </div>
            </div>
        </div>

        {{-- ── Row 3: Village ───────────────────────────────────────────── --}}
        <div 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'">Select Village</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="sel.village.length === villages.length"
                           @change="sel.village = $event.target.checked ? villages.map(d => d.id) : []"
                           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 villages" :key="item.id">
                    <label class="flex items-center gap-3 cursor-pointer group">
                        <input type="checkbox" :value="item.id" x-model="sel.village"
                               class="w-4 h-4 rounded border-gray-300 accent-blue-600 cursor-pointer">
                        <span class="text-sm font-medium text-gray-800 group-hover:text-blue-600 transition-colors" x-text="item.name"></span>
                    </label>
                </template>
            </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">
                Selected Sample Records:
                <span class="font-bold text-gray-900" x-text="totalRecords"></span>
            </span>
            <button type="button" class="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white text-sm font-semibold rounded-lg hover:bg-blue-700 transition-colors">
                <svg width="14" height="14" 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>

    </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>
@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const fileInput = document.getElementById('fileInput');
    const fileNameElements = document.querySelectorAll('.file-name');
    const uploadSplash = document.getElementById('uploadSplash');

    fileInput.addEventListener('change', function () {
        if (this.files.length > 0) {
            const fileName = this.files[0].name;

            fileNameElements.forEach(el => el.textContent = fileName);

            uploadSplash.classList.remove('hidden');

            setTimeout(() => {
                uploadSplash.classList.add('hidden');
            }, 1500);
        }
    });
});
</script>
@endpush
@endsection