{{--
    brafa Systems — Edit user.
    Livewire backing: App\Http\Livewire\LaravelExamples\UserManagement\Edit.
    Bindings preserved: wire:submit.prevent="update", wire:model picture/
    user.name/user.email/user.role_id/password/passwordConfirmation/
    selectedProperty, wire:click assignProperty/removeProperty, @error,
    Session demo flash, $user/$roles/$properties/$assignedProperties.
--}}
<div class="brafa-screen">
    <section class="card card--pad-lg" style="max-width: 760px;">
        <div class="spread" style="margin-bottom: 20px;">
            <div>
                <h3 class="card-heading" style="margin: 0;">Edit user</h3>
                <span class="subtle" style="font-size: 13px;">Update user details.</span>
            </div>
            <a class="btn btn--outline btn--sm" href="{{ route('user-management') }}">
                <x-lucide name="arrow-left" size="14" /> Back to list
            </a>
        </div>

        @if (Session::has('demo'))
            <div class="status-banner status-banner--danger">{{ Session::get('demo') }}</div>
        @endif

        <form wire:submit.prevent="update" enctype="multipart/form-data">
            <div class="d-flex justify-content-center" style="margin-bottom: 18px;">
                <div class="profile-avatar-wrap">
                    @if ($picture)
                        <img src="{{ $picture->temporaryUrl() }}" class="brafa-avatar" style="width:80px;height:80px;" alt="Preview">
                    @elseif ($user->picture)
                        <img src="/storage/{{ $user->picture }}" class="brafa-avatar" style="width:80px;height:80px;" alt="avatar">
                    @else
                        <div class="brafa-avatar" style="width:80px;height:80px;font-size:26px;">
                            {{ strtoupper(mb_substr($user->name ?? '?', 0, 1)) }}
                        </div>
                    @endif
                    <label for="file-input" class="profile-avatar-edit" title="Select image">
                        <x-lucide name="edit-3" size="13" stroke="#FFFFFF" />
                        <input wire:model="picture" type="file" id="file-input">
                    </label>
                </div>
            </div>
            @error('picture') <p class="field-error" style="text-align:center;">{{ $message }}</p> @enderror

            <div class="input-row">
                <div>
                    <label class="field-label" for="exampleInputname">Name</label>
                    <input wire:model.lazy="user.name" type="text" id="exampleInputname" class="input @error('user.name') is-invalid @enderror" placeholder="Enter name">
                    @error('user.name') <p class="field-error">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="field-label" for="exampleInputemail">Email</label>
                    <input wire:model.lazy="user.email" type="email" id="exampleInputemail" class="input @error('user.email') is-invalid @enderror" placeholder="Enter email">
                    @error('user.email') <p class="field-error">{{ $message }}</p> @enderror
                </div>
            </div>

            <div class="input-row">
                <div>
                    <label class="field-label" for="role">Role</label>
                    <select wire:model="user.role_id" id="role" class="select @error('user.role_id') is-invalid @enderror">
                        @foreach ($roles as $role)
                            <option value="{{ $role->id }}" {{ $user->role_id === $role->id ? 'selected' : '' }}>{{ $role->name }}</option>
                        @endforeach
                    </select>
                    @error('user.role_id') <p class="field-error">{{ $message }}</p> @enderror
                </div>
                <div></div>
            </div>

            <div class="input-row">
                <div>
                    <label class="field-label" for="examplePassword">Password</label>
                    <input wire:model.lazy="password" type="password" id="examplePassword" class="input @error('password') is-invalid @enderror" placeholder="Enter password">
                    @error('password') <p class="field-error">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="field-label" for="examplePassword2">Confirm password</label>
                    <input wire:model.lazy="passwordConfirmation" type="password" id="examplePassword2" class="input" placeholder="Confirm password">
                </div>
            </div>

            <div class="hstack" style="margin-top: 4px;">
                <button type="submit" class="btn">Save changes</button>
            </div>

            {{-- Assign properties --}}
            <div class="divider"></div>
            <h3 class="card-heading" style="font-size: 16px; margin: 0 0 12px;">Assigned properties</h3>
            <div class="input-row" style="align-items: end;">
                <div>
                    <label class="field-label" for="property">Assign a property</label>
                    <select wire:model="selectedProperty" id="property" class="select">
                        <option value="">Select a property…</option>
                        @foreach ($properties as $property)
                            <option value="{{ $property->PropertyID }}">{{ $property->PropertyName }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <button type="button" wire:click="assignProperty" class="btn btn--green">Assign property</button>
                </div>
            </div>

            <div style="overflow-x:auto; margin-top: 8px;">
                <table class="table">
                    <thead>
                        <tr><th>User ID</th><th>Property ID</th><th style="width: 90px;">Action</th></tr>
                    </thead>
                    <tbody>
                        @forelse ($assignedProperties ?? [] as $property)
                            @php
                                $uid = is_array($property) ? $property['user_id'] : $property->user_id;
                                $pid = is_array($property) ? $property['property_id'] : $property->property_id;
                            @endphp
                            <tr>
                                <td class="mono muted">{{ $uid }}</td>
                                <td class="mono">{{ $pid }}</td>
                                <td>
                                    <button type="button" class="btn btn--outline btn--sm" wire:click="removeProperty({{ $pid }})"
                                            style="border-color: var(--brafa-red); color: var(--brafa-red);">Remove</button>
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="3" style="padding:24px;text-align:center;color:var(--fg-subtle);font-size:13px;">No properties assigned.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </form>
    </section>
</div>

@push('js')
    <script src="{{ asset('assets') }}/js/plugins/perfect-scrollbar.min.js"></script>
@endpush