@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">
    @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"
                            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'"
                    >
                        <div class="[&_.form-input]:h-11">
                            <x-searchable-select
                                name="office_id"
                                id="office_id"
                                label="Office"
                                :options="$offices->map(fn($o) => ['value' => $o->id, 'label' => $o->name])->values()"
                                :selected="(string) old('office_id', $userForm['isEdit'] ? ($user->office_id ?? '') : '')"
                                placeholder="Select office"
                                search-placeholder="Search office..."
                                :required="true"
                                icon="office"
                                :enhanced="true"
                                reset-on="super-admin-selected"
                            />
                        </div>
                    </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. Passwords are managed by the system — users cannot change them.</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">Share this password with the user to give them access.</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