@extends('layouts.app')
@section('page-title', isset($user) && $user?->exists ? 'Edit User' : 'Add User')

@section('content')

<x-admin-hero-header :title="$userForm['isEdit'] ? 'Edit: '.$user->full_name : 'Add New User'" :subtitle="$userForm['isEdit'] ? $user->email : 'Fill in the details to create a new account'">
    <x-slot:icon><svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M7 14a4 4 0 110-8 4 4 0 010 8zm10 6v-2a5 5 0 00-10 0v2m10-11v6m3-3h-6"/></svg></x-slot:icon>
    <x-slot:actions><a href="{{ route('admin.users.index') }}" class="btn border-white/15 bg-white/15 text-white backdrop-blur hover:bg-white/20 focus:ring-white/30"><svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>Back to Users</a></x-slot:actions>
</x-admin-hero-header>

<form method="POST" action="{{ $userForm['isEdit'] ? route('admin.users.update', $user) : route('admin.users.store') }}" enctype="multipart/form-data"
      x-data="userForm({
          offices: @js($offices->values()),
          selectedOfficeId: @js((string) old('office_id', $userForm['isEdit'] ? ($user->office_id ?? '') : '')),
      })"
      @country-selected.window="loadOffices($event.detail)">
    @csrf
    @if($userForm['isEdit'])
        @method('PUT')
    @endif
    <input type="hidden" name="status" value="{{ old('status', $userForm['isEdit'] ? (int) $user->status : 1) }}" />

    <div class="grid grid-cols-1 gap-6">

        
        <div class="space-y-5">

            
            <div class="user-form-card card overflow-visible [&_.form-input]:bg-white [&_.form-label]:font-semibold [&_.form-label]:text-surface-700">
                <div class="rounded-t-2xl border-b border-surface-100 bg-gradient-to-r from-surface-50/80 to-white px-6 py-4">
                    <div class="flex items-center gap-3">
                        <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-primary-50 text-primary-600">
                            <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M12 12a4 4 0 100-8 4 4 0 000 8zm7 9a7 7 0 00-14 0"/></svg>
                        </div>
                        <div>
                            <h2 class="text-base font-bold text-surface-900">User information</h2>
                            <p class="mt-0.5 text-xs text-surface-500">Enter personal details and assign system access.</p>
                        </div>
                    </div>
                </div>

                <div class="p-5 sm:p-6">

                <div class="mb-4" x-data="imagePreview(@js($userForm['avatarPreview']))">
                    <input type="hidden" name="remove_avatar" :value="removed ? '1' : '0'" />
                    <div class="flex flex-col gap-3 rounded-xl border border-surface-200 bg-surface-50/60 p-3 sm:flex-row sm:items-center">
                        <label class="group relative mx-auto h-16 w-16 shrink-0 cursor-pointer sm:mx-0">
                            <div class="flex h-16 w-16 items-center justify-center overflow-hidden rounded-xl border-2 border-dashed bg-white shadow-sm transition-all group-hover:border-primary-400 group-hover:shadow-md {{ $errors->has('avatar') ? 'border-red-300' : 'border-surface-300' }}">
                                <img x-show="preview" :src="preview" class="h-full w-full object-cover" alt="Profile picture preview" />
                                <div x-show="!preview" class="flex flex-col items-center gap-1 text-surface-400 transition-colors group-hover:text-primary-500">
                                    <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9zm12 4a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                                    <span class="text-[10px] font-semibold">Photo</span>
                                </div>
                            </div>
                            <input id="avatar" x-ref="fileInput" type="file" name="avatar" accept="image/jpeg,image/png,.jpg,.jpeg,.png" class="sr-only" @change="handleFile($event)" />
                        </label>

                        <div class="min-w-0 flex-1 text-center sm:text-left">
                            <p class="text-sm font-bold text-surface-900">Profile picture <span class="font-normal text-surface-400">(optional)</span></p>
                            <p class="mt-0.5 text-xs leading-5 text-surface-600">Add a clear photo so teammates can quickly identify this user.</p>
                            <p class="mt-1 text-[11px] text-surface-400">JPG or PNG · Maximum 2MB</p>
                            @error('avatar')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                        </div>

                        <div class="flex shrink-0 items-center gap-2 self-center">
                            <button x-show="preview" type="button" @click="remove()" class="btn-danger px-3 py-2">
                                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M6 7h12m-9 0V5h6v2m-8 0l1 13h8l1-13M10 11v5m4-5v5"/></svg>
                                Remove
                            </button>
                            <label for="avatar" class="btn-secondary cursor-pointer px-3 py-2">
                                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M12 16V4m0 0L7 9m5-5l5 5M5 20h14"/></svg>
                                <span x-text="preview ? 'Change photo' : 'Choose photo'"></span>
                            </label>
                        </div>
                    </div>
                </div>

                <div class="grid grid-cols-1 gap-x-5 gap-y-4 sm:grid-cols-2">

                    <div class="group">
                        <label for="full_name" class="form-label">Full Name <span class="text-[11px] text-red-500/80">*</span></label>
                        <div class="relative">
                            <svg class="pointer-events-none absolute left-3.5 top-1/2 h-4 w-4 -translate-y-1/2 {{ $errors->has('full_name') ? 'text-red-500' : 'text-surface-400 group-focus-within:text-primary-500' }} transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M12 12a4 4 0 100-8 4 4 0 000 8zm7 9a7 7 0 00-14 0"/></svg>
                            <input type="text" id="full_name" name="full_name" autocomplete="name"
                            value="{{ $userForm['fullName'] }}" placeholder="John Doe" required
                            class="form-input h-11 pl-11 {{ $errors->has('full_name') ? 'form-input-error' : '' }}" />
                        </div>
                        @error('full_name')<p class="mt-1.5 text-xs text-red-600">{{ $message }}</p>@enderror
                    </div>

                    <div class="group">
                        <label for="email" class="form-label">Email Address <span class="text-[11px] text-red-500/80">*</span></label>
                        <div class="relative">
                            <svg class="pointer-events-none absolute left-3.5 top-1/2 h-4 w-4 -translate-y-1/2 {{ $errors->has('email') ? 'text-red-500' : 'text-surface-400 group-focus-within:text-primary-500' }} transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M3 6l9 6 9-6M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
                            <input type="email" id="email" name="email" autocomplete="email"
                            value="{{ old('email', $userForm['isEdit'] ? $user->email : '') }}"
                            placeholder="john@example.com" required
                            class="form-input h-11 pl-11 {{ $errors->has('email') ? 'form-input-error' : '' }}" />
                        </div>
                        @error('email')<p class="mt-1.5 text-xs text-red-600">{{ $message }}</p>@enderror
                    </div>

                    <div class="group">
                        <label for="designation" class="form-label">Designation</label>
                        <div class="relative">
                            <svg class="pointer-events-none absolute left-3.5 top-1/2 h-4 w-4 -translate-y-1/2 {{ $errors->has('designation') ? 'text-red-500' : 'text-surface-400 group-focus-within:text-primary-500' }} transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M9 6V4h6v2m-9 0h12a2 2 0 012 2v9a2 2 0 01-2 2H6a2 2 0 01-2-2V8a2 2 0 012-2zm-2 6h16M9 12v2h6v-2"/></svg>
                            <input type="text" id="designation" name="designation" autocomplete="organization-title"
                            value="{{ old('designation', $userForm['isEdit'] ? $user->designation : '') }}"
                            placeholder="e.g. Senior Auditor"
                            class="form-input h-11 pl-11 {{ $errors->has('designation') ? 'form-input-error' : '' }}" />
                        </div>
                        @error('designation')<p class="mt-1.5 text-xs text-red-600">{{ $message }}</p>@enderror
                    </div>

                    <div class="[&_.form-input]:h-11">
                        <x-searchable-select
                            name="role"
                            id="role"
                            label="System Role"
                            :options="$roles->map(fn($r) => ['value' => $r->name, 'label' => $r->name])->values()"
                            :selected="$userForm['selectedRole']"
                            placeholder="Select role"
                            search-placeholder="Search role..."
                            :required="true"
                            error="role"
                            icon="role"
                            :enhanced="true"
                            emit-event="role-selected"
                        />
                    </div>

                    <div
                        class="[&_.form-input]:h-11"
                        x-data="{ visible: @js($userForm['selectedRole'] !== 'Super Admin') }"
                        x-show="visible"
                        x-transition.opacity
                        x-on:role-selected.window="visible = $event.detail !== 'Super Admin'; if (!visible) $dispatch('super-admin-selected')"
                    >
                        <x-searchable-select
                            name="country_id"
                            id="country_id"
                            label="Country"
                            :options="$countries"
                            :selected="$userForm['selectedCountry']"
                            placeholder="Select country"
                            search-placeholder="Search country..."
                            :required="true"
                            emit-event="country-selected"
                            icon="country"
                            :enhanced="true"
                            :show-code="true"
                            reset-on="super-admin-selected"
                        />
                    </div>

                    <div
                        x-data="{ visible: @js($userForm['selectedRole'] !== 'Super Admin') }"
                        x-show="visible"
                        x-transition.opacity
                        x-on:role-selected.window="visible = $event.detail !== 'Super Admin'"
                    >
                        <label for="office_id_button" class="form-label">Office <span class="text-[11px] text-red-500/80">*</span></label>
                        <div
                            x-data="{
                                open: false, query: '', loading: false,
                                countrySelected: @js((bool) $userForm['selectedCountry']),
                                selected: @js((string) old('office_id', $userForm['isEdit'] ? ($user->office_id ?? '') : '')),
                                options: @js($offices->map(fn($o) => ['id' => $o->id, 'name' => $o->name])->values()),
                                get selectedLabel() {
                                    return (this.options.find(o => String(o.id) === this.selected) ?? {}).name ?? '';
                                },
                                get filteredOptions() {
                                    const q = this.query.trim().toLowerCase();
                                    return q ? this.options.filter(o => o.name.toLowerCase().includes(q)) : this.options;
                                },
                                choose(id) { this.selected = String(id); this.open = false; this.query = ''; },
                                clear() { this.selected = ''; this.query = ''; this.open = false; }
                            }"
                            @click.outside="open = false"
                            x-on:role-selected.window="if ($event.detail === 'Super Admin') clear()"
                            @country-selected.window="countrySelected = Boolean($event.detail)"
                            @offices-loading.window="loading = true; options = []; selected = ''; open = false; query = ''"
                            @offices-updated.window="loading = false; options = $event.detail.map(o => ({ id: o.id, name: o.name }))"
                            class="relative"
                        >
                            <input type="hidden" name="office_id" x-model="selected" />

                            <div x-show="loading" class="form-input flex h-11 items-center gap-3 text-[13px] text-surface-400">
                                <svg class="h-4 w-4 animate-spin text-primary-500" fill="none" viewBox="0 0 24 24" aria-hidden="true"><circle class="opacity-25" cx="12" cy="12" r="9" stroke="currentColor" stroke-width="3"/><path class="opacity-75" fill="currentColor" d="M12 3a9 9 0 00-9 9h3a6 6 0 016-6V3z"/></svg>
                                Loading offices...
                            </div>

                            <div x-show="!loading && options.length === 0">
                                <div class="form-input flex h-11 cursor-not-allowed items-center gap-3 border-dashed bg-surface-100/70 text-[13px] text-surface-400">
                                    <svg x-show="!countrySelected" class="h-4 w-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M8 11V8a4 4 0 118 0v3m-9 0h10a1 1 0 011 1v8H6v-8a1 1 0 011-1z"/></svg>
                                    <svg x-show="countrySelected" class="h-4 w-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2M5 21H3M9 7h1m-1 4h1m4-4h1m-1 4h1M8 18l8-8"/></svg>
                                    <span x-text="countrySelected ? 'No offices available for this country' : 'Select a country first'"></span>
                                </div>
                            </div>

                            <div x-show="!loading && options.length > 0">
                                <button
                                    type="button"
                                    id="office_id_button"
                                    @click="open = !open"
                                    @keydown.escape.prevent="open = false"
                                    @keydown.arrow-down.prevent="open = true"
                                    @keydown.tab="open = false"
                                    class="form-input h-11 flex items-center gap-3 text-left w-full {{ $errors->has('office_id') ? 'form-input-error' : '' }}"
                                    :class="selectedLabel ? 'text-surface-900 font-medium' : 'text-surface-400'"
                                >
                                    <svg class="h-4 w-4 shrink-0 {{ $errors->has('office_id') ? 'text-red-500' : 'text-surface-400' }}" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2M5 21H3m6-14h1m-1 4h1m4-4h1m-1 4h1M9 21v-5h6v5"/></svg>
                                    <span class="truncate flex-1" x-text="selectedLabel || 'Select office'"></span>
                                    <span class="flex items-center gap-1 shrink-0">
                                        <svg class="w-4 h-4 text-surface-400 transition-transform" :class="open ? 'rotate-180' : ''"
                                             fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                                        </svg>
                                    </span>
                                </button>

                                <div x-show="open" x-transition style="display:none;"
                                     class="absolute z-50 mt-1 w-full overflow-hidden rounded-xl border border-surface-200 bg-white shadow-soft-lg">
                                    <div class="p-2 border-b border-surface-100">
                                        <input type="search" x-model="query"
                                               @keydown.escape.prevent="open = false"
                                               placeholder="Search office..."
                                               class="form-input form-icon-search py-2" />
                                    </div>
                                    <div class="max-h-52 overflow-y-auto py-1">
                                        <template x-for="office in filteredOptions" :key="office.id">
                                            <button type="button" @click="choose(office.id)"
                                                    class="flex w-full items-center justify-between gap-3 px-3 py-2 text-left text-sm hover:bg-primary-50 hover:text-primary-700 transition-colors"
                                                    :class="String(selected) === String(office.id) ? 'bg-primary-50 text-primary-700 font-medium' : 'text-surface-700'">
                                                <span class="truncate" x-text="office.name"></span>
                                                <svg x-show="String(selected) === String(office.id)" class="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                                                </svg>
                                            </button>
                                        </template>
                                        <p x-show="filteredOptions.length === 0" class="px-3 py-3 text-sm text-surface-400">No offices found</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @error('office_id')<p class="mt-1.5 text-xs text-red-600">{{ $message }}</p>@enderror
                    </div>

                </div>

                
                @unless($userForm['isEdit'])
                    <div class="mt-4 flex items-start gap-3 rounded-xl border border-blue-100 bg-blue-50/70 p-3.5">
                        <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-blue-100 text-blue-600">
                        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg></div>
                        <div><p class="text-sm font-semibold text-blue-900">Password setup is automatic</p><p class="mt-1 text-xs leading-5 text-blue-700">A secure password will be generated and emailed to the user. They must change it on first login.</p></div>
                    </div>
                @endunless

                
                @if($userForm['isEdit'] && $user->plain_password)
                    <div class="mt-4 p-4 rounded-xl bg-amber-50 border border-amber-200" x-data="clipboardState()">
                        <div class="flex items-center justify-between mb-1">
                            <p class="text-xs font-semibold text-amber-800">Temporary Password (not yet changed)</p>
                            <button type="button"
                                @click="navigator.clipboard.writeText(@js($user->plain_password)); copied = true; setTimeout(() => copied = false, 2000)"
                                class="text-xs text-amber-700 hover:text-amber-900 flex items-center gap-1 transition-colors">
                                <svg x-show="!copied" class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/>
                                </svg>
                                <span x-text="copied ? 'Copied!' : 'Copy'"></span>
                            </button>
                        </div>
                        <p class="font-mono text-sm text-amber-900 tracking-wide">{{ $user->plain_password }}</p>
                        <p class="text-xs text-amber-600 mt-1">This password will be hidden once the user changes it.</p>
                    </div>
                @endif

                <div class="-mx-5 -mb-5 mt-5 flex items-center justify-end gap-3 rounded-b-2xl border-t border-surface-100 bg-surface-50/70 px-5 py-4 sm:-mx-6 sm:-mb-6 sm:px-6">
                    <a href="{{ route('admin.users.index') }}" class="btn-secondary">Cancel</a>
                    <button type="submit" class="btn-primary">
                        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                        </svg>
                        {{ $userForm['isEdit'] ? 'Save Changes' : 'Create User' }}
                    </button>
                </div>

            </div>
            </div>

        </div>

    </div>
</form>

@endsection