@extends('astrologer.layouts.app')

@section('title', 'Profile Settings')

@push('styles')
    <style>
        .custom-scrollbar::-webkit-scrollbar {
            width: 6px;
        }

        .custom-scrollbar::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.05);
        }

        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 3px;
        }

        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
            background: rgba(255, 255, 255, 0.2);
        }
    </style>
@endpush

@section('content')
    <div class="max-w-5xl mx-auto">
        <!-- Messages -->
        <div class="space-y-4 mb-6">
            @if(session('success'))
                <div
                    class="bg-emerald-500/5 border border-emerald-500/10 text-emerald-500 px-5 py-3 rounded-xl flex items-center gap-3 text-sm">
                    <i data-lucide="check-circle" class="w-4 h-4"></i>
                    <span class="font-medium">{{ session('success') }}</span>
                </div>
            @endif

            @if($errors->any())
                <div class="bg-red-500/5 border border-red-500/10 text-red-500 px-5 py-3 rounded-xl text-sm">
                    <ul class="list-disc list-inside space-y-0.5">
                        @foreach($errors->all() as $error)
                            <li class="font-medium">{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
        </div>

        <!-- Progress Card -->
        <div class="glass-card mb-6 rounded-2xl p-6 border border-white/5 relative overflow-hidden group">
            <div class="flex items-center justify-between mb-3 relative z-10">
                <div class="flex items-center gap-3">
                    <div class="w-8 h-8 bg-yellow-500/10 rounded-lg flex items-center justify-center">
                        <i data-lucide="sparkles" class="text-yellow-500 w-4 h-4"></i>
                    </div>
                    <div>
                        <span class="block text-sm font-bold text-slate-100 tracking-tight">Profile Strength</span>
                        <span class="block text-[9px] text-slate-500 uppercase tracking-widest font-black">Visibility
                            Booster</span>
                    </div>
                </div>
                <div class="text-right">
                    <span class="text-yellow-500 font-bold text-xl">{{ $completion }}%</span>
                </div>
            </div>
            <div class="w-full bg-slate-900 h-1.5 rounded-full overflow-hidden border border-white/5 relative z-10">
                <div class="h-full bg-gradient-to-r from-yellow-600 to-yellow-400 transition-all duration-1000"
                    style="width: {{ $completion }}%"></div>
            </div>
        </div>

        <form action="{{ route('astrologer.profile.update') }}" method="POST" enctype="multipart/form-data"
            class="space-y-6">
            @csrf
            @method('PUT')

            <!-- SECTION A: Personal Information -->
            <div class="glass-card rounded-2xl overflow-hidden">
                <div class="bg-white/[0.02] px-8 py-5 border-b border-white/5">
                    <h3 class="text-base font-bold text-white flex items-center gap-2.5">
                        <i data-lucide="user-check" class="text-blue-500 w-5 h-5"></i>
                        Personal Information
                    </h3>
                </div>
                <div class="px-8 py-8 space-y-6">
                    <div class="grid grid-cols-1 md:grid-cols-4 gap-8 items-start">
                        <!-- Profile Pic -->
                        <div class="md:col-span-1 flex flex-col items-center" x-data="{ photoPreview: null }">
                            <div class="relative w-32 h-32 rounded-2xl bg-slate-900 border-2 border-white/5 overflow-hidden group cursor-pointer"
                                onclick="document.getElementById('profile_pic').click()">
                                @if($detail->profile_pic)
                                    <img src="{{ asset('storage/' . $detail->profile_pic) }}" class="w-full h-full object-cover"
                                        id="preview">
                                @else
                                    <div class="w-full h-full flex flex-col items-center justify-center text-slate-700">
                                        <i data-lucide="camera" class="w-8 h-8 mb-2 opacity-50"></i>
                                        <span class="text-[9px] font-bold uppercase tracking-widest">Upload Photo</span>
                                    </div>
                                @endif
                                <div
                                    class="absolute inset-0 bg-yellow-500/20 backdrop-blur-sm flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                                    <i data-lucide="upload-cloud" class="text-white w-6 h-6"></i>
                                </div>
                            </div>
                            <input type="file" name="profile_pic" id="profile_pic" class="hidden" accept="image/*"
                                onchange="previewImage(this, 'preview')">
                            @error('profile_pic')
                                <p class="text-red-500 text-[9px] mt-1.5 font-bold uppercase tracking-tight">{{ $message }}</p>
                            @enderror
                            <p class="text-[9px] text-slate-500 mt-3 text-center font-bold uppercase tracking-[0.1em]">
                                Professional headshot<br><span class="text-red-500/80">(Required)</span></p>
                        </div>

                        <div class="md:col-span-3 grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label
                                    class="block text-[10px] font-bold text-slate-500 mb-1.5 uppercase tracking-wider">Full
                                    Name <span class="text-red-500">*</span></label>
                                <input type="text" name="name" value="{{ old('name', $user->name) }}"
                                    class="w-full bg-slate-900/50 border border-white/5 rounded-lg px-4 py-2.5 text-slate-100 outline-none focus:border-yellow-500/30 transition-all font-medium text-sm"
                                    required>
                            </div>
                            <div>
                                <label
                                    class="block text-[10px] font-bold text-slate-500 mb-1.5 uppercase tracking-wider">Mobile
                                    Number <span class="text-red-500">*</span></label>
                                <div class="relative">
                                    <input type="text" name="mobile" value="{{ old('mobile', $detail->mobile) }}"
                                        class="w-full bg-slate-900/50 border border-white/5 rounded-lg px-4 py-2.5 text-slate-100 outline-none focus:border-yellow-500/30 transition-all font-medium text-sm"
                                        required>
                                    @if($detail->mobile_verified_at)
                                        <span
                                            class="absolute right-4 top-1/2 -translate-y-1/2 text-[9px] font-black text-emerald-500 uppercase flex items-center gap-1 bg-emerald-500/10 px-2 py-1 rounded">
                                            <i data-lucide="check" class="w-2.5 h-2.5 text-emerald-500"></i> Verified
                                        </span>
                                    @else
                                        <button type="button"
                                            class="absolute right-4 top-1/2 -translate-y-1/2 text-[9px] font-black text-yellow-500 uppercase hover:text-yellow-400 bg-yellow-500/10 px-2 py-1 rounded">Verify</button>
                                    @endif
                                </div>
                            </div>
                            <div>
                                <label
                                    class="block text-[10px] font-bold text-slate-500 mb-1.5 uppercase tracking-wider">Gender
                                    <span class="text-red-500">*</span></label>
                                <select name="gender"
                                    class="w-full bg-slate-900/50 border border-white/5 rounded-lg px-4 py-2.5 text-slate-100 outline-none focus:border-yellow-500/30 transition-all font-medium text-sm"
                                    required>
                                    <option value="Male" {{ old('gender', $detail->gender) == 'Male' ? 'selected' : '' }}>Male
                                    </option>
                                    <option value="Female" {{ old('gender', $detail->gender) == 'Female' ? 'selected' : '' }}>
                                        Female</option>
                                    <option value="Other" {{ old('gender', $detail->gender) == 'Other' ? 'selected' : '' }}>
                                        Other</option>
                                </select>
                            </div>
                            <div>
                                <label
                                    class="block text-[10px] font-bold text-slate-500 mb-1.5 uppercase tracking-wider">Date
                                    of Birth <span class="text-red-500">*</span></label>
                                <input type="date" name="dob"
                                    value="{{ old('dob', $detail->dob ? $detail->dob->format('Y-m-d') : '') }}"
                                    class="w-full bg-slate-900/50 border border-white/5 rounded-lg px-4 py-2.5 text-slate-100 outline-none focus:border-yellow-500/30 transition-all font-medium text-sm"
                                    required>
                            </div>

                            <!-- Location -->
                            <div class="md:col-span-2 grid grid-cols-1 md:grid-cols-2 gap-4" x-data="{ 
                                                country: '{{ old('country_id', $detail->country_id ?? '') }}',
                                                fetchStates() {
                                                    if(!this.country) return;
                                                    fetch('/api/states/' + this.country)
                                                        .then(res => res.json())
                                                        .then(data => {
                                                            let stateSelect = document.getElementById('state_id');
                                                            stateSelect.innerHTML = '<option value=\'\'>Select State</option>';
                                                            data.forEach(state => {
                                                                let selected = state.id == '{{ old('state_id', $detail->state_id ?? '') }}' ? 'selected' : '';
                                                                stateSelect.innerHTML += `<option value='${state.id}' ${selected}>${state.name}</option>`;
                                                            });
                                                        });
                                                }
                                            }" x-init="fetchStates()">
                                <div>
                                    <label
                                        class="block text-[10px] font-bold text-slate-500 mb-1.5 uppercase tracking-wider">Country</label>
                                    <select name="country_id" x-model="country" @change="fetchStates()"
                                        class="w-full bg-slate-900/50 border border-white/5 rounded-lg px-4 py-2.5 text-slate-100 outline-none focus:border-yellow-500/30 transition-all font-medium text-sm">
                                        <option value="">Select Country</option>
                                        @foreach($countries as $country)
                                            <option value="{{ $country->id }}" {{ old('country_id', $detail->country_id ?? '') == $country->id ? 'selected' : '' }}>{{ $country->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div>
                                    <label
                                        class="block text-[10px] font-bold text-slate-500 mb-1.5 uppercase tracking-wider">State</label>
                                    <select name="state_id" id="state_id"
                                        class="w-full bg-slate-900/50 border border-white/5 rounded-lg px-4 py-2.5 text-slate-100 outline-none focus:border-yellow-500/30 transition-all font-medium text-sm">
                                        <option value="">Select State</option>
                                        @foreach($states as $state)
                                            <option value="{{ $state->id }}" {{ old('state_id', $detail->state_id ?? '') == $state->id ? 'selected' : '' }}>{{ $state->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div>
                                    <label
                                        class="block text-[10px] font-bold text-slate-500 mb-1.5 uppercase tracking-wider">City</label>
                                    <input type="text" name="city" value="{{ old('city', $detail->city ?? '') }}"
                                        class="w-full bg-slate-900/50 border border-white/5 rounded-lg px-4 py-2.5 text-slate-100 outline-none focus:border-yellow-500/30 transition-all font-medium text-sm">
                                </div>
                                <div>
                                    <label
                                        class="block text-[10px] font-bold text-slate-500 mb-1.5 uppercase tracking-wider">Pincode</label>
                                    <input type="text" name="pincode" value="{{ old('pincode', $detail->pincode ?? '') }}"
                                        class="w-full bg-slate-900/50 border border-white/5 rounded-lg px-4 py-2.5 text-slate-100 outline-none focus:border-yellow-500/30 transition-all font-medium text-sm">
                                </div>
                            </div>

                            <div class="md:col-span-2">
                                <label
                                    class="block text-[10px] font-bold text-slate-500 mb-1.5 uppercase tracking-wider">Full
                                    Address <span class="text-red-500">*</span></label>
                                <textarea name="address" rows="2"
                                    class="w-full bg-slate-900/50 border border-white/5 rounded-lg px-4 py-2.5 text-slate-100 outline-none focus:border-yellow-500/30 transition-all font-medium text-sm"
                                    required>{{ old('address', $detail->address) }}</textarea>
                            </div>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 pt-2" x-data="{ 
                                                                                                    idFront: '{{ $detail->id_proof_front ? asset('storage/' . $detail->id_proof_front) : '' }}',
                                                                                                    idBack: '{{ $detail->id_proof_back ? asset('storage/' . $detail->id_proof_back) : '' }}',
                                                                                                    pan: '{{ $detail->pan_card ? asset('storage/' . $detail->pan_card) : '' }}',
                                                                                                    loadingFront: false,
                                                                                                    loadingBack: false,
                                                                                                    loadingPan: false,
                                                                                                    handleFile(e, type) {
                                                                                                        const file = e.target.files[0];
                                                                                                        if (!file) return;

                                                                                                        this['loading' + type] = true;
                                                                                                        const reader = new FileReader();
                                                                                                        reader.onload = (event) => {
                                                                                                            setTimeout(() => {
                                                                                                                this[type.toLowerCase() === 'pan' ? 'pan' : 'id' + type] = event.target.result;
                                                                                                                this['loading' + type] = false;
                                                                                                            }, 800);
                                                                                                        };
                                                                                                        reader.readAsDataURL(file);
                                                                                                    }
                                                                                                }">
                        <!-- ID Front -->
                        <div>
                            <label
                                class="block text-[10px] font-bold text-slate-500 mb-1.5 uppercase tracking-wider">Aadhaar
                                Front <span class="text-red-500">*</span></label>
                            <div class="relative h-24 bg-slate-900/50 border border-dashed border-white/5 rounded-xl flex items-center justify-center overflow-hidden cursor-pointer hover:bg-white/5 transition-all group"
                                onclick="document.getElementById('id_proof_front').click()">

                                <template x-if="idFront && !loadingFront">
                                    <img :src="idFront" class="w-full h-full object-cover">
                                </template>

                                <template x-if="!idFront && !loadingFront">
                                    <i data-lucide="plus"
                                        class="text-slate-800 group-hover:text-slate-600 transition-colors w-4 h-4"></i>
                                </template>

                                <div x-show="loadingFront"
                                    class="absolute inset-0 bg-slate-950/80 flex flex-col items-center justify-center">
                                    <div
                                        class="w-4 h-4 border border-yellow-500/20 border-t-yellow-500 rounded-full animate-spin">
                                    </div>
                                </div>

                                <div x-show="idFront && !loadingFront"
                                    class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 flex items-center justify-center transition-opacity">
                                    <i data-lucide="refresh-cw" class="text-white w-4 h-4"></i>
                                </div>
                            </div>
                            <input type="file" name="id_proof_front" id="id_proof_front" class="hidden" accept="image/*"
                                @change="handleFile($event, 'Front')">
                            @error('id_proof_front')
                                <p class="text-red-500 text-[9px] mt-1.5 font-bold uppercase tracking-tight">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- ID Back -->
                        <div>
                            <label
                                class="block text-[10px] font-bold text-slate-500 mb-1.5 uppercase tracking-wider">Aadhaar
                                Back <span class="text-red-500">*</span></label>
                            <div class="relative h-24 bg-slate-900/50 border border-dashed border-white/5 rounded-xl flex items-center justify-center overflow-hidden cursor-pointer hover:bg-white/5 transition-all group"
                                onclick="document.getElementById('id_proof_back').click()">

                                <template x-if="idBack && !loadingBack">
                                    <img :src="idBack" class="w-full h-full object-cover">
                                </template>

                                <template x-if="!idBack && !loadingBack">
                                    <i data-lucide="plus"
                                        class="text-slate-800 group-hover:text-slate-600 transition-colors w-4 h-4"></i>
                                </template>

                                <div x-show="loadingBack"
                                    class="absolute inset-0 bg-slate-950/80 flex flex-col items-center justify-center">
                                    <div
                                        class="w-4 h-4 border border-yellow-500/20 border-t-yellow-500 rounded-full animate-spin">
                                    </div>
                                </div>

                                <div x-show="idBack && !loadingBack"
                                    class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 flex items-center justify-center transition-opacity">
                                    <i data-lucide="refresh-cw" class="text-white w-4 h-4"></i>
                                </div>
                            </div>
                            <input type="file" name="id_proof_back" id="id_proof_back" class="hidden" accept="image/*"
                                @change="handleFile($event, 'Back')">
                            @error('id_proof_back')
                                <p class="text-red-500 text-[9px] mt-1.5 font-bold uppercase tracking-tight">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- PAN Card -->
                        <div>
                            <label class="block text-[10px] font-bold text-slate-500 mb-1.5 uppercase tracking-wider">PAN
                                Card <span class="text-red-500">*</span></label>
                            <div class="relative h-24 bg-slate-900/50 border border-dashed border-white/5 rounded-xl flex items-center justify-center overflow-hidden cursor-pointer hover:bg-white/5 transition-all group"
                                onclick="document.getElementById('pan_card').click()">

                                <template x-if="pan && !loadingPan">
                                    <img :src="pan" class="w-full h-full object-cover">
                                </template>

                                <template x-if="!pan && !loadingPan">
                                    <i data-lucide="plus"
                                        class="text-slate-800 group-hover:text-slate-600 transition-colors w-4 h-4"></i>
                                </template>

                                <div x-show="loadingPan"
                                    class="absolute inset-0 bg-slate-950/80 flex flex-col items-center justify-center">
                                    <div
                                        class="w-4 h-4 border border-yellow-500/20 border-t-yellow-500 rounded-full animate-spin">
                                    </div>
                                </div>

                                <div x-show="pan && !loadingPan"
                                    class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 flex items-center justify-center transition-opacity">
                                    <i data-lucide="refresh-cw" class="text-white w-4 h-4"></i>
                                </div>
                            </div>
                            <input type="file" name="pan_card" id="pan_card" class="hidden" accept="image/*"
                                @change="handleFile($event, 'Pan')">
                            @error('pan_card')
                                <p class="text-red-500 text-[9px] mt-1.5 font-bold uppercase tracking-tight">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                </div>
            </div>

            <!-- SECTION B: Expertise & Experience -->
            <div class="glass-card rounded-2xl overflow-hidden">
                <div class="bg-white/[0.02] px-8 py-5 border-b border-white/5">
                    <h3 class="text-base font-bold text-white flex items-center gap-2.5">
                        <i data-lucide="award" class="text-yellow-500 w-5 h-5"></i>
                        Expertise & Experience
                    </h3>
                </div>
                <div class="px-8 py-8 space-y-6">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label
                                class="block text-[10px] font-bold text-slate-500 mb-1.5 uppercase tracking-wider">Primary
                                Expertise <span class="text-red-500">*</span></label>
                            <div x-data="multiSelect({
                                            items: {{ $scategories->map(fn($s) => ['id' => $s->id, 'name' => $s->name])->values()->toJson() }},
                                            selected: {{ json_encode(old('primary_skills', $user->scategories->pluck('id')->toArray() ?? [])) }},
                                            placeholder: 'Select main expertise...'
                                        })" class="relative group" @click.outside="open = false">

                                <select name="primary_skills[]" multiple class="hidden">
                                    <template x-for="id in selected">
                                        <option :value="id" selected></option>
                                    </template>
                                </select>

                                <!-- Trigger -->
                                <div @click="open = !open"
                                    class="w-full bg-slate-900/50 border border-white/5 rounded-lg px-4 py-2.5 text-slate-100 hover:border-white/10 focus:border-yellow-500/50 outline-none transition-all cursor-pointer min-h-[44px] flex flex-wrap gap-2 items-center justify-between">
                                    <div class="flex flex-wrap gap-2 items-center flex-1">
                                        <template x-if="selected.length === 0">
                                            <span class="text-slate-500 text-sm font-medium" x-text="placeholder"></span>
                                        </template>
                                        <template x-for="item in selectedOptions" :key="item.id">
                                            <span
                                                class="bg-yellow-500/10 text-yellow-500 border border-yellow-500/20 px-2 py-0.5 rounded text-xs font-bold flex items-center gap-1">
                                                <span x-text="item.name"></span>
                                                <button type="button" @click.stop="toggle(item.id)"
                                                    class="hover:text-yellow-300 transition-colors">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"
                                                        viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                                        stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
                                                        <path d="M18 6 6 18" />
                                                        <path d="m6 6 12 12" />
                                                    </svg>
                                                </button>
                                            </span>
                                        </template>
                                    </div>
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
                                        fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                        stroke-linejoin="round" class="text-slate-500 transition-transform duration-300"
                                        :class="open ? 'rotate-180' : ''">
                                        <path d="m6 9 6 6 6-6" />
                                    </svg>
                                </div>

                                <!-- Dropdown -->
                                <div x-show="open" x-transition:enter="transition ease-out duration-200"
                                    x-transition:enter-start="opacity-0 translate-y-2"
                                    x-transition:enter-end="opacity-100 translate-y-0"
                                    x-transition:leave="transition ease-in duration-150"
                                    x-transition:leave-start="opacity-100 translate-y-0"
                                    x-transition:leave-end="opacity-0 translate-y-2"
                                    class="absolute z-20 w-full mt-2 bg-slate-900 border border-white/10 rounded-xl shadow-xl overflow-hidden backdrop-blur-xl"
                                    style="display: none;">

                                    <div class="p-2 border-b border-white/5 sticky top-0 bg-slate-900 z-10">
                                        <div class="relative">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"
                                                viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                                stroke-linecap="round" stroke-linejoin="round"
                                                class="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400">
                                                <circle cx="11" cy="11" r="8" />
                                                <path d="m21 21-4.3-4.3" />
                                            </svg>
                                            <input type="text" x-model="search" placeholder="Search..."
                                                class="w-full bg-slate-800 rounded-lg pl-9 pr-3 py-1.5 text-xs text-white placeholder-slate-500 focus:outline-none focus:ring-1 focus:ring-yellow-500/50">
                                        </div>
                                    </div>

                                    <div class="max-h-48 overflow-y-auto p-1.5 space-y-0.5 custom-scrollbar">
                                        <template x-for="item in filteredOptions" :key="item.id">
                                            <div @click="toggle(item.id)"
                                                class="flex items-center gap-2 px-3 py-2 rounded-lg cursor-pointer transition-colors group/item"
                                                :class="isSelected(item.id) ? 'bg-yellow-500/10 text-yellow-500' : 'hover:bg-white/5 text-slate-300'">
                                                <div class="w-4 h-4 rounded border flex items-center justify-center transition-colors"
                                                    :class="isSelected(item.id) ? 'bg-yellow-500 border-yellow-500' : 'border-slate-600 group-hover/item:border-slate-500'">
                                                    <svg x-show="isSelected(item.id)" xmlns="http://www.w3.org/2000/svg"
                                                        width="10" height="10" viewBox="0 0 24 24" fill="none"
                                                        stroke="currentColor" stroke-width="4" stroke-linecap="round"
                                                        stroke-linejoin="round" class="text-slate-900">
                                                        <polyline points="20 6 9 17 4 12" />
                                                    </svg>
                                                </div>
                                                <span x-text="item.name" class="font-medium text-xs"></span>
                                            </div>
                                        </template>
                                        <div x-show="filteredOptions.length === 0"
                                            class="p-3 text-center text-slate-500 text-xs">No result found</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div>
                            <label class="block text-[10px] font-bold text-slate-500 mb-1.5 uppercase tracking-wider">Years
                                of Experience <span class="text-red-500">*</span></label>
                            <input type="number" name="experience_years"
                                value="{{ old('experience_years', $detail->experience_years) }}"
                                class="w-full bg-slate-900/50 border border-white/5 rounded-lg px-4 py-2.5 text-slate-100 outline-none focus:border-yellow-500/30 transition-all font-medium text-sm"
                                required>
                        </div>
                    </div>

                    <div>
                        <label class="block text-[10px] font-bold text-slate-600 mb-3 uppercase tracking-widest">Secondary
                            Skills</label>
                        <div class="grid grid-cols-2 md:grid-cols-4 gap-2">
                            @foreach($skills as $skill)
                                <label
                                    class="flex items-center gap-2 bg-white/5 p-3 rounded-lg cursor-pointer hover:bg-white/10 transition-all border border-transparent has-[:checked]:border-yellow-500/20 has-[:checked]:bg-yellow-500/5">
                                    <input type="checkbox" name="skills[]" value="{{ $skill->id }}" {{ in_array($skill->id, $user->skills->pluck('id')->toArray()) ? 'checked' : '' }}
                                        class="w-3.5 h-3.5 rounded border-white/10 text-yellow-500 focus:ring-yellow-500 bg-transparent">
                                    <span class="text-xs font-medium text-slate-400">{{ $skill->name }}</span>
                                </label>
                            @endforeach
                        </div>
                    </div>

                    <div>
                        <label class="block text-[10px] font-bold text-slate-500 mb-1.5 uppercase tracking-wider">Languages
                            Spoken <span class="text-red-500">*</span></label>
                        <div x-data="multiSelect({
                                            items: {{ $languages->map(fn($l) => ['id' => $l->id, 'name' => $l->name])->values()->toJson() }},
                                            selected: {{ json_encode(old('languages', $user->languages->pluck('id')->toArray())) }},
                                            placeholder: 'Select languages...'
                                        })" class="relative group" @click.outside="open = false">

                            <select name="languages[]" multiple class="hidden">
                                <template x-for="id in selected">
                                    <option :value="id" selected></option>
                                </template>
                            </select>

                            <!-- Trigger -->
                            <div @click="open = !open"
                                class="w-full bg-slate-900/50 border border-white/5 rounded-lg px-4 py-2.5 text-slate-100 hover:border-white/10 focus:border-yellow-500/50 outline-none transition-all cursor-pointer min-h-[44px] flex flex-wrap gap-2 items-center justify-between">
                                <div class="flex flex-wrap gap-2 items-center flex-1">
                                    <template x-if="selected.length === 0">
                                        <span class="text-slate-500 text-sm font-medium" x-text="placeholder"></span>
                                    </template>
                                    <template x-for="item in selectedOptions" :key="item.id">
                                        <span
                                            class="bg-yellow-500/10 text-yellow-500 border border-yellow-500/20 px-2 py-0.5 rounded text-xs font-bold flex items-center gap-1">
                                            <span x-text="item.name"></span>
                                            <button type="button" @click.stop="toggle(item.id)"
                                                class="hover:text-yellow-300 transition-colors">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"
                                                    viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"
                                                    stroke-linecap="round" stroke-linejoin="round">
                                                    <path d="M18 6 6 18" />
                                                    <path d="m6 6 12 12" />
                                                </svg>
                                            </button>
                                        </span>
                                    </template>
                                </div>
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                    stroke-linejoin="round" class="text-slate-500 transition-transform duration-300"
                                    :class="open ? 'rotate-180' : ''">
                                    <path d="m6 9 6 6 6-6" />
                                </svg>
                            </div>

                            <!-- Dropdown -->
                            <div x-show="open" x-transition:enter="transition ease-out duration-200"
                                x-transition:enter-start="opacity-0 translate-y-2"
                                x-transition:enter-end="opacity-100 translate-y-0"
                                x-transition:leave="transition ease-in duration-150"
                                x-transition:leave-start="opacity-100 translate-y-0"
                                x-transition:leave-end="opacity-0 translate-y-2"
                                class="absolute z-20 w-full mt-2 bg-slate-900 border border-white/10 rounded-xl shadow-xl overflow-hidden backdrop-blur-xl"
                                style="display: none;">

                                <div class="p-2 border-b border-white/5 sticky top-0 bg-slate-900 z-10">
                                    <div class="relative">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"
                                            fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                            stroke-linejoin="round"
                                            class="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400">
                                            <circle cx="11" cy="11" r="8" />
                                            <path d="m21 21-4.3-4.3" />
                                        </svg>
                                        <input type="text" x-model="search" placeholder="Search..."
                                            class="w-full bg-slate-800 rounded-lg pl-9 pr-3 py-1.5 text-xs text-white placeholder-slate-500 focus:outline-none focus:ring-1 focus:ring-yellow-500/50">
                                    </div>
                                </div>

                                <div class="max-h-48 overflow-y-auto p-1.5 space-y-0.5 custom-scrollbar">
                                    <template x-for="item in filteredOptions" :key="item.id">
                                        <div @click="toggle(item.id)"
                                            class="flex items-center gap-2 px-3 py-2 rounded-lg cursor-pointer transition-colors group/item"
                                            :class="isSelected(item.id) ? 'bg-yellow-500/10 text-yellow-500' : 'hover:bg-white/5 text-slate-300'">
                                            <div class="w-4 h-4 rounded border flex items-center justify-center transition-colors"
                                                :class="isSelected(item.id) ? 'bg-yellow-500 border-yellow-500' : 'border-slate-600 group-hover/item:border-slate-500'">
                                                <svg x-show="isSelected(item.id)" xmlns="http://www.w3.org/2000/svg"
                                                    width="10" height="10" viewBox="0 0 24 24" fill="none"
                                                    stroke="currentColor" stroke-width="4" stroke-linecap="round"
                                                    stroke-linejoin="round" class="text-slate-900">
                                                    <polyline points="20 6 9 17 4 12" />
                                                </svg>
                                            </div>
                                            <span x-text="item.name" class="font-medium text-xs"></span>
                                        </div>
                                    </template>
                                    <div x-show="filteredOptions.length === 0"
                                        class="p-3 text-center text-slate-500 text-xs">No result found</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div>
                        <label class="block text-[10px] font-bold text-slate-500 mb-1.5 uppercase tracking-wider">Detailed
                            Bio <span class="text-red-500">*</span></label>
                        <textarea name="bio" rows="4" placeholder="Your journey and approach..."
                            class="w-full bg-slate-900/50 border border-white/5 rounded-lg px-5 py-4 text-slate-200 outline-none focus:border-yellow-500/30 transition-all font-normal text-sm leading-relaxed"
                            required>{{ old('bio', $detail->bio) }}</textarea>
                    </div>

                    <div>
                        <label class="block text-[10px] font-bold text-slate-500 mb-1.5 uppercase tracking-wider">Education
                            <span class="text-red-500">*</span></label>
                        <div x-data="multiSelect({
                                            items: {{ $qualificationsMaster->map(fn($q) => ['id' => $q->id, 'name' => $q->name])->values()->toJson() }},
                                            selected: {{ json_encode(old('education', $detail->education ?? [])) }},
                                            placeholder: 'Select degrees...'
                                        })" class="relative group" @click.outside="open = false">

                            <select name="education[]" multiple class="hidden">
                                <template x-for="id in selected">
                                    <option :value="id" selected></option>
                                </template>
                            </select>

                            <!-- Trigger -->
                            <div @click="open = !open"
                                class="w-full bg-slate-900/50 border border-white/5 rounded-lg px-4 py-2.5 text-slate-100 hover:border-white/10 focus:border-yellow-500/50 outline-none transition-all cursor-pointer min-h-[44px] flex flex-wrap gap-2 items-center justify-between">
                                <div class="flex flex-wrap gap-2 items-center flex-1">
                                    <template x-if="selected.length === 0">
                                        <span class="text-slate-500 text-sm font-medium" x-text="placeholder"></span>
                                    </template>
                                    <template x-for="item in selectedOptions" :key="item.id">
                                        <span
                                            class="bg-yellow-500/10 text-yellow-500 border border-yellow-500/20 px-2 py-0.5 rounded text-xs font-bold flex items-center gap-1">
                                            <span x-text="item.name"></span>
                                            <button type="button" @click.stop="toggle(item.id)"
                                                class="hover:text-yellow-300 transition-colors">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"
                                                    viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"
                                                    stroke-linecap="round" stroke-linejoin="round">
                                                    <path d="M18 6 6 18" />
                                                    <path d="m6 6 12 12" />
                                                </svg>
                                            </button>
                                        </span>
                                    </template>
                                </div>
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                    stroke-linejoin="round" class="text-slate-500 transition-transform duration-300"
                                    :class="open ? 'rotate-180' : ''">
                                    <path d="m6 9 6 6 6-6" />
                                </svg>
                            </div>

                            <!-- Dropdown -->
                            <div x-show="open" x-transition:enter="transition ease-out duration-200"
                                x-transition:enter-start="opacity-0 translate-y-2"
                                x-transition:enter-end="opacity-100 translate-y-0"
                                x-transition:leave="transition ease-in duration-150"
                                x-transition:leave-start="opacity-100 translate-y-0"
                                x-transition:leave-end="opacity-0 translate-y-2"
                                class="absolute z-20 w-full mt-2 bg-slate-900 border border-white/10 rounded-xl shadow-xl overflow-hidden backdrop-blur-xl"
                                style="display: none;">

                                <div class="p-2 border-b border-white/5 sticky top-0 bg-slate-900 z-10">
                                    <div class="relative">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"
                                            fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                            stroke-linejoin="round"
                                            class="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400">
                                            <circle cx="11" cy="11" r="8" />
                                            <path d="m21 21-4.3-4.3" />
                                        </svg>
                                        <input type="text" x-model="search" placeholder="Search..."
                                            class="w-full bg-slate-800 rounded-lg pl-9 pr-3 py-1.5 text-xs text-white placeholder-slate-500 focus:outline-none focus:ring-1 focus:ring-yellow-500/50">
                                    </div>
                                </div>

                                <div class="max-h-48 overflow-y-auto p-1.5 space-y-0.5 custom-scrollbar">
                                    <template x-for="item in filteredOptions" :key="item.id">
                                        <div @click="toggle(item.id)"
                                            class="flex items-center gap-2 px-3 py-2 rounded-lg cursor-pointer transition-colors group/item"
                                            :class="isSelected(item.id) ? 'bg-yellow-500/10 text-yellow-500' : 'hover:bg-white/5 text-slate-300'">
                                            <div class="w-4 h-4 rounded border flex items-center justify-center transition-colors"
                                                :class="isSelected(item.id) ? 'bg-yellow-500 border-yellow-500' : 'border-slate-600 group-hover/item:border-slate-500'">
                                                <svg x-show="isSelected(item.id)" xmlns="http://www.w3.org/2000/svg"
                                                    width="10" height="10" viewBox="0 0 24 24" fill="none"
                                                    stroke="currentColor" stroke-width="4" stroke-linecap="round"
                                                    stroke-linejoin="round" class="text-slate-900">
                                                    <polyline points="20 6 9 17 4 12" />
                                                </svg>
                                            </div>
                                            <span x-text="item.name" class="font-medium text-xs"></span>
                                        </div>
                                    </template>
                                    <div x-show="filteredOptions.length === 0"
                                        class="p-3 text-center text-slate-500 text-xs">No result found</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- SECTION C: Service & Pricing -->
            <div class="glass-card rounded-[2.5rem] overflow-hidden">
                <div class="bg-white/5 px-10 py-6 border-b border-white/5">
                    <h3 class="text-xl font-bold flex items-center gap-3">
                        <i data-lucide="banknote" class="text-green-500"></i>
                        C. Service & Pricing
                    </h3>
                </div>
                <div class="p-10 space-y-8">
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                        <div>
                            <label class="block text-sm font-bold text-slate-400 mb-2">Chat Price (per min) <span
                                    class="text-red-500">*</span></label>
                            <div class="relative">
                                <span
                                    class="absolute left-4 top-1/2 -translate-y-1/2 text-slate-500 font-bold font-mono">₹</span>
                                <input type="number" name="price_chat" value="{{ old('price_chat', $detail->price_chat) }}"
                                    class="w-full bg-slate-900/50 border border-white/10 rounded-xl pl-10 pr-5 py-3.5 text-white outline-none focus:border-yellow-500/50 transition-all font-medium"
                                    required>
                            </div>
                        </div>
                        <div>
                            <label class="block text-sm font-bold text-slate-400 mb-2">Call Price (per min) <span
                                    class="text-red-500">*</span></label>
                            <div class="relative">
                                <span
                                    class="absolute left-4 top-1/2 -translate-y-1/2 text-slate-500 font-bold font-mono">₹</span>
                                <input type="number" name="price_call" value="{{ old('price_call', $detail->price_call) }}"
                                    class="w-full bg-slate-900/50 border border-white/10 rounded-xl pl-10 pr-5 py-3.5 text-white outline-none focus:border-yellow-500/50 transition-all font-medium"
                                    required>
                            </div>
                        </div>
                        <div class="md:col-span-2 grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label
                                    class="block text-[10px] font-bold text-slate-500 mb-1.5 uppercase tracking-wider">Video
                                    Price (per min) <span class="text-red-500">*</span></label>
                                <div class="relative">
                                    <span
                                        class="absolute left-4 top-1/2 -translate-y-1/2 text-slate-500 font-bold font-mono text-sm">₹</span>
                                    <input type="number" name="price_video"
                                        value="{{ old('price_video', $detail->price_video) }}"
                                        class="w-full bg-slate-900/50 border border-white/5 rounded-lg pl-8 pr-4 py-2 text-slate-100 outline-none focus:border-yellow-500/30 transition-all font-medium text-sm"
                                        required>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div>
                        <label class="block text-[10px] font-bold text-slate-600 mb-4 uppercase tracking-widest">Weekly
                            Availability Scheduler</label>
                        <div class="grid grid-cols-2 sm:grid-cols-4 md:grid-cols-7 gap-3">
                            @php $days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; @endphp
                            @foreach($days as $index => $day)
                                @php $avail = $user->availabilities->where('day', $index)->first(); @endphp
                                <div
                                    class="bg-white/[0.02] border border-white/5 rounded-xl p-3 text-center flex flex-col gap-2.5">
                                    <span
                                        class="text-[9px] font-black uppercase tracking-widest text-slate-500">{{ $day }}</span>
                                    <div class="flex flex-col gap-2">
                                        <label class="inline-flex items-center justify-center cursor-pointer group">
                                            <input type="checkbox" name="availability[{{ $index }}][is_available]" value="1" {{ $avail && $avail->is_available ? 'checked' : '' }} class="hidden peer">
                                            <div
                                                class="w-8 h-4.5 bg-slate-800 rounded-full peer-checked:bg-yellow-500 relative transition-all">
                                                <div
                                                    class="absolute left-0.5 top-0.5 w-3.5 h-3.5 bg-white rounded-full transition-all peer-checked:left-4">
                                                </div>
                                            </div>
                                        </label>
                                        <input type="time" name="availability[{{ $index }}][start_time]"
                                            value="{{ $avail ? $avail->start_time : '10:00' }}"
                                            class="bg-slate-900/80 border border-white/5 rounded-md text-[9px] px-1.5 py-1 text-slate-300 outline-none">
                                        <input type="time" name="availability[{{ $index }}][end_time]"
                                            value="{{ $avail ? $avail->end_time : '18:00' }}"
                                            class="bg-slate-900/80 border border-white/5 rounded-md text-[9px] px-1.5 py-1 text-slate-300 outline-none">
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>

                    <div>
                        <label class="block text-[10px] font-bold text-slate-500 mb-1.5 uppercase tracking-wider">Daily
                            Contribution (Hours) <span class="text-red-500">*</span></label>
                        <select name="contribution_hours"
                            class="w-full bg-slate-900/50 border border-white/5 rounded-lg px-4 py-2.5 text-slate-100 outline-none focus:border-yellow-500/30 transition-all font-medium text-sm"
                            required>
                            <option value="0-2" {{ old('contribution_hours', $detail->contribution_hours) == '0-2' ? 'selected' : '' }}>0-2 Hours</option>
                            <option value="2-4" {{ old('contribution_hours', $detail->contribution_hours) == '2-4' ? 'selected' : '' }}>2-4 Hours</option>
                            <option value="4-6" {{ old('contribution_hours', $detail->contribution_hours) == '4-6' ? 'selected' : '' }}>4-6 Hours</option>
                            <option value="More than 8" {{ old('contribution_hours', $detail->contribution_hours) == 'More than 8' ? 'selected' : '' }}>More than 8 Hours</option>
                        </select>
                    </div>
                </div>
            </div>

            <!-- SECTION D: Social & Trust Signals -->
            <div class="glass-card rounded-2xl overflow-hidden">
                <div class="bg-white/[0.02] px-8 py-5 border-b border-white/5">
                    <h3 class="text-base font-bold text-white flex items-center gap-2.5">
                        <i data-lucide="shield-check" class="text-blue-400 w-5 h-5"></i>
                        Social & Trust Signals
                    </h3>
                </div>
                <div class="px-8 py-8 space-y-8">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div x-data="{ videoLink: '{{ old('intro_video_link', $detail->intro_video_path) }}' }">
                            <label class="block text-[10px] font-bold text-slate-500 mb-1.5 uppercase tracking-wider">Intro
                                Video Link</label>
                            <div
                                class="relative bg-slate-900/50 border border-white/5 rounded-lg px-3 flex items-center gap-2.5">
                                <i data-lucide="video" class="w-4 h-4 text-blue-500"></i>
                                <input type="url" name="intro_video_link" x-model="videoLink"
                                    placeholder="Paste YouTube or video link..."
                                    class="w-full bg-transparent py-2.5 text-slate-100 outline-none text-sm font-medium">
                            </div>

                            <!-- Video Preview -->
                            <div x-show="videoLink"
                                class="mt-3 rounded-xl overflow-hidden bg-black aspect-video border border-white/5 shadow-xl">
                                <template x-if="videoLink.includes('youtube.com') || videoLink.includes('youtu.be')">
                                    <iframe class="w-full h-full"
                                        :src="'https://www.youtube.com/embed/' + (videoLink.includes('v=') ? videoLink.split('v=')[1].split('&')[0] : videoLink.split('/').pop())"
                                        frameborder="0" allowfullscreen></iframe>
                                </template>
                                <template
                                    x-if="videoLink && !videoLink.includes('youtube.com') && !videoLink.includes('youtu.be')">
                                    <div class="w-full h-full flex items-center justify-center bg-slate-900/50">
                                        <div class="text-center">
                                            <i data-lucide="play-circle" class="w-8 h-8 text-blue-500/30 mx-auto mb-2"></i>
                                            <p class="text-[8px] text-slate-600 font-bold uppercase">External Video Link
                                                Ready</p>
                                        </div>
                                    </div>
                                </template>
                            </div>

                            <p class="text-[9px] text-slate-600 mt-2 font-bold uppercase tracking-widest">A 60s intro build
                                trusts with clients.</p>
                            @error('intro_video_link')
                                <p class="text-red-500 text-[9px] mt-1.5 font-bold uppercase tracking-tight">{{ $message }}</p>
                            @enderror
                        </div>
                        <div class="space-y-3">
                            <label
                                class="block text-[10px] font-bold text-slate-500 mb-0.5 uppercase tracking-wider">Website
                                URL</label>
                            <div class="flex items-center gap-2.5 bg-slate-900/50 border border-white/5 rounded-lg px-3">
                                <i data-lucide="globe" class="w-4 h-4 text-emerald-500/70"></i>
                                <input type="url" name="website_url" value="{{ old('website_url', $detail->website_url) }}"
                                    placeholder="Your Website URL"
                                    class="w-full bg-transparent py-2 text-slate-100 outline-none text-sm font-medium">
                            </div>
                        </div>

                        <div class="space-y-3">
                            <label class="block text-[10px] font-bold text-slate-500 mb-0.5 uppercase tracking-wider">Social
                                Links</label>
                            <div class="flex items-center gap-2.5 bg-slate-900/50 border border-white/5 rounded-lg px-3">
                                <i data-lucide="youtube" class="w-4 h-4 text-red-500/70"></i>
                                <input type="url" name="social_links[youtube]"
                                    value="{{ $detail->social_links['youtube'] ?? '' }}" placeholder="YouTube URL"
                                    class="w-full bg-transparent py-2 text-slate-100 outline-none text-sm font-medium">
                            </div>
                            <div class="flex items-center gap-2.5 bg-slate-900/50 border border-white/5 rounded-lg px-3">
                                <i data-lucide="linkedin" class="w-4 h-4 text-blue-500/70"></i>
                                <input type="url" name="social_links[linkedin]"
                                    value="{{ $detail->social_links['linkedin'] ?? '' }}" placeholder="LinkedIn URL"
                                    class="w-full bg-transparent py-2 text-slate-100 outline-none text-sm font-medium">
                            </div>
                            <div class="flex items-center gap-2.5 bg-slate-900/50 border border-white/5 rounded-lg px-3">
                                <i data-lucide="instagram" class="w-4 h-4 text-pink-500/70"></i>
                                <input type="url" name="social_links[instagram]"
                                    value="{{ $detail->social_links['instagram'] ?? '' }}" placeholder="Instagram URL"
                                    class="w-full bg-transparent py-2 text-slate-100 outline-none text-sm font-medium">
                            </div>
                        </div>
                    </div>

                    <div x-data="{ 
                                                                awards: {{ json_encode(old('awards', $detail->awards ?? [])) }}, 
                                                                addAward() { 
                                                                    this.awards.push({ title: '', description: '', image: '', existing_image: '' }); 
                                                                    this.$nextTick(() => { lucide.createIcons(); });
                                                                }, 
                                                                removeAward(index) { 
                                                                    this.awards.splice(index, 1); 
                                                                }, 
                                                                previewAward(e, index) { 
                                                                    const file = e.target.files[0]; 
                                                                    if (!file) return; 
                                                                    const reader = new FileReader(); 
                                                                    reader.onload = (event) => {
                                                                        this.awards[index].local_preview = event.target.result;
                                                                        this.$nextTick(() => { lucide.createIcons(); });
                                                                    };
                                                                    reader.readAsDataURL(file);
                                                                },
                                                                getAwardThumb(award) {
                                                                    if (award.local_preview) return award.local_preview;
                                                                    if (award.image) return '/storage/' + award.image;
                                                                    if (award.existing_image) return '/storage/' + award.existing_image;
                                                                    return null;
                                                                },
                                                                triggerUpload(index) {
                                                                    document.getElementById('award_file_' + index).click();
                                                                }
                                                            }">
                        <div class="flex items-center justify-between mb-4">
                            <label class="block text-[10px] font-bold text-slate-600 uppercase tracking-widest">Awards &
                                Recognition</label>
                            <button type="button" @click="addAward()"
                                class="bg-blue-500/5 hover:bg-blue-500/10 text-blue-500 text-[9px] px-4 py-1.5 rounded-lg font-black uppercase tracking-widest flex items-center gap-1.5 transition-all">
                                <i data-lucide="plus" class="w-3 h-3"></i> Add
                            </button>
                        </div>

                        <div class="grid grid-cols-1 gap-4">
                            <template x-for="(award, index) in awards" :key="index">
                                <div
                                    class="bg-white/[0.01] border border-white/5 rounded-xl p-6 relative group transition-all hover:border-yellow-500/10">
                                    <button type="button" @click="removeAward(index)"
                                        class="absolute top-3 right-3 w-8 h-8 bg-red-500/5 hover:bg-red-500 text-red-500 hover:text-white rounded-lg flex items-center justify-center transition-all">
                                        <i data-lucide="trash-2" class="w-4 h-4"></i>
                                    </button>

                                    <div class="flex flex-col md:flex-row gap-8">
                                        <div class="md:w-40 h-40 flex-shrink-0">
                                            <div class="w-full h-full bg-slate-900 border-2 border-dashed border-white/10 rounded-2xl overflow-hidden relative cursor-pointer group/img transition-all hover:border-white/20"
                                                @click="triggerUpload(index)">
                                                <img x-show="getAwardThumb(award)" :src="getAwardThumb(award)"
                                                    class="w-full h-full object-cover">
                                                <div x-show="!getAwardThumb(award)"
                                                    class="w-full h-full flex flex-col items-center justify-center text-slate-600">
                                                    <i data-lucide="image-plus" class="w-8 h-8 mb-2"></i>
                                                    <span class="text-[8px] font-bold uppercase tracking-widest">Upload
                                                        Photo</span>
                                                </div>
                                                <div
                                                    class="absolute inset-0 bg-black/40 opacity-0 group-hover/img:opacity-100 flex items-center justify-center transition-opacity">
                                                    <i data-lucide="camera" class="text-white w-6 h-6"></i>
                                                </div>
                                            </div>
                                            <input type="file" :name="'awards['+index+'][image]'"
                                                :id="'award_file_' + index" class="hidden" accept="image/*"
                                                @change="previewAward($event, index)">
                                            <input type="hidden" :name="'awards['+index+'][existing_image]'"
                                                :value="award.image">
                                        </div>

                                        <div class="flex-1 space-y-3">
                                            <div>
                                                <input type="text" :name="'awards['+index+'][title]'" x-model="award.title"
                                                    placeholder="Award Title (e.g. Best Astrologer 2023)"
                                                    class="w-full bg-slate-900/50 border border-white/5 rounded-lg px-4 py-2.5 text-slate-100 outline-none focus:border-yellow-500/30 transition-all font-bold text-sm">
                                            </div>
                                            <div>
                                                <textarea :name="'awards['+index+'][description]'"
                                                    x-model="award.description" placeholder="Description or organization..."
                                                    rows="2"
                                                    class="w-full bg-slate-900/50 border border-white/5 rounded-lg px-4 py-2.5 text-xs text-slate-400 outline-none focus:border-yellow-500/30 transition-all font-medium leading-relaxed"></textarea>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </template>

                            <div x-show="awards.length === 0"
                                class="text-center py-10 border border-dashed border-white/5 rounded-xl bg-white/[0.01]">
                                <div
                                    class="w-10 h-10 bg-white/5 rounded-full flex items-center justify-center mx-auto mb-3">
                                    <i data-lucide="award" class="text-slate-600 w-5 h-5"></i>
                                </div>
                                <p class="text-slate-600 text-[10px] font-bold uppercase tracking-widest">No awards added
                                    yet</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="sticky bottom-6 pb-6 flex justify-center">
                <button type="submit"
                    class="bg-yellow-500 hover:bg-yellow-400 text-slate-950 font-black text-sm px-12 py-4 rounded-xl shadow-xl shadow-yellow-500/20 transition-all uppercase tracking-[0.2em] transform active:scale-95">
                    Save Profile Improvements
                </button>
            </div>
        </form>
    </div>

    <script>
        function previewImage(input, previewId) {
            if (input.files && input.files[0]) {
                const reader = new FileReader();
                reader.onload = function (e) { document.getElementById(previewId).src = e.target.result; }
                reader.readAsDataURL(input.files[0]);
            }
        }

        document.addEventListener('alpine:init', () => {
            Alpine.data('multiSelect', (config) => ({
                items: config.items,
                selected: config.selected ? config.selected.map(String) : [],
                placeholder: config.placeholder,
                search: '',
                open: false,

                get filteredOptions() {
                    if (this.search === '') return this.items;
                    return this.items.filter(item =>
                        item.name.toLowerCase().includes(this.search.toLowerCase())
                    );
                },

                get selectedOptions() {
                    return this.items.filter(item => this.selected.includes(String(item.id)));
                },

                toggle(id) {
                    id = String(id);
                    if (this.selected.includes(id)) {
                        this.selected = this.selected.filter(i => i !== id);
                    } else {
                        this.selected.push(id);
                    }
                },

                isSelected(id) {
                    return this.selected.includes(String(id));
                }
            }))
        });
    </script>
@endsection