libra/resources/views/livewire/admin/timelines/create.blade.php

<?php

use App\Enums\TimelineStatus;
use App\Models\AdminLog;
use App\Models\Timeline;
use App\Models\User;
use Livewire\Volt\Component;

new class extends Component {
    public string $search = '';
    public ?int $selectedUserId = null;
    public ?User $selectedUser = null;
    public string $caseName = '';
    public string $caseReference = '';
    public string $initialNotes = '';

    public function rules(): array
    {
        return [
            'selectedUserId' => ['required', 'exists:users,id'],
            'caseName' => ['required', 'string', 'max:255'],
            'caseReference' => ['nullable', 'string', 'max:50', 'unique:timelines,case_reference'],
        ];
    }

    public function messages(): array
    {
        return [
            'selectedUserId.required' => __('timelines.client_required'),
            'caseReference.unique' => __('timelines.case_reference_exists'),
        ];
    }

    public function updatedSearch(): void
    {
        if ($this->selectedUser && ! str_contains(strtolower($this->selectedUser->full_name), strtolower($this->search))) {
            $this->selectedUserId = null;
            $this->selectedUser = null;
        }
    }

    public function getClientsProperty()
    {
        if (strlen($this->search) < 2) {
            return collect();
        }

        return User::query()
            ->clients()
            ->active()
            ->where(function ($query) {
                $query->where('full_name', 'like', "%{$this->search}%")
                    ->orWhere('email', 'like', "%{$this->search}%");
            })
            ->limit(10)
            ->get();
    }

    public function selectUser(int $userId): void
    {
        $this->selectedUserId = $userId;
        $this->selectedUser = User::find($userId);
        $this->search = $this->selectedUser->full_name;
    }

    public function clearSelection(): void
    {
        $this->selectedUserId = null;
        $this->selectedUser = null;
        $this->search = '';
    }

    public function create(): void
    {
        $this->validate();

        $timeline = Timeline::create([
            'user_id' => $this->selectedUserId,
            'case_name' => $this->caseName,
            'case_reference' => $this->caseReference ?: null,
            'status' => TimelineStatus::Active,
        ]);

        if ($this->initialNotes) {
            $timeline->updates()->create([
                'admin_id' => auth()->id(),
                'update_text' => $this->initialNotes,
            ]);
        }

        AdminLog::create([
            'admin_id' => auth()->id(),
            'action' => 'create',
            'target_type' => 'timeline',
            'target_id' => $timeline->id,
            'new_values' => $timeline->toArray(),
            'ip_address' => request()->ip(),
            'created_at' => now(),
        ]);

        session()->flash('success', __('messages.timeline_created'));

        $this->redirect(route('admin.timelines.show', $timeline), navigate: true);
    }
}; ?>

<div>
    <div class="mb-6">
        <flux:button variant="outline" :href="route('admin.dashboard')" wire:navigate icon="arrow-left">
            {{ __('timelines.back_to_timelines') }}
        </flux:button>
    </div>

    <div class="mb-6">
        <flux:heading size="xl">{{ __('timelines.create_timeline') }}</flux:heading>
    </div>

    <div class="rounded-lg border border-zinc-200 bg-white p-6 ">
        <form wire:submit="create" class="space-y-6">
            {{-- Client Selection --}}
            <flux:field>
                <flux:label class="required">{{ __('timelines.select_client') }}</flux:label>

                @if($selectedUser)
                    <div class="flex items-center gap-3 rounded-lg border border-zinc-200 bg-zinc-50 p-3 ">
                        <flux:avatar size="sm" name="{{ $selectedUser->full_name }}" />
                        <div class="flex-1">
                            <div class="font-medium text-zinc-900 ">{{ $selectedUser->full_name }}</div>
                            <div class="text-sm text-zinc-500 ">{{ $selectedUser->email }}</div>
                        </div>
                        <flux:button variant="outline" size="sm" wire:click="clearSelection" icon="x-mark" />
                    </div>
                @else
                    <div class="relative">
                        <flux:input
                            wire:model.live.debounce.300ms="search"
                            type="text"
                            placeholder="{{ __('timelines.search_client') }}"
                            icon="magnifying-glass"
                            autocomplete="off"
                        />

                        @if(strlen($search) >= 2)
                            <div class="absolute z-10 mt-1 w-full rounded-lg border border-zinc-200 bg-white shadow-lg ">
                                @forelse($this->clients as $client)
                                    <button
                                        type="button"
                                        wire:key="client-{{ $client->id }}"
                                        wire:click="selectUser({{ $client->id }})"
                                        class="flex w-full items-center gap-3 px-4 py-3 text-start hover:bg-zinc-50  first:rounded-t-lg last:rounded-b-lg"
                                    >
                                        <flux:avatar size="sm" name="{{ $client->full_name }}" />
                                        <div>
                                            <div class="font-medium text-zinc-900 ">{{ $client->full_name }}</div>
                                            <div class="text-sm text-zinc-500 ">{{ $client->email }}</div>
                                        </div>
                                    </button>
                                @empty
                                    <div class="px-4 py-3 text-sm text-zinc-500 ">
                                        {{ __('timelines.no_clients_found') }}
                                    </div>
                                @endforelse
                            </div>
                        @elseif(strlen($search) > 0 && strlen($search) < 2)
                            <div class="absolute z-10 mt-1 w-full rounded-lg border border-zinc-200 bg-white p-3 shadow-lg ">
                                <div class="text-sm text-zinc-500 ">
                                    {{ __('timelines.type_to_search') }}
                                </div>
                            </div>
                        @endif
                    </div>
                @endif

                <flux:error name="selectedUserId" />
            </flux:field>

            <div class="grid gap-6 sm:grid-cols-2">
                {{-- Case Name --}}
                <flux:field>
                    <flux:label class="required">{{ __('timelines.case_name') }}</flux:label>
                    <flux:input
                        wire:model="caseName"
                        type="text"
                        required
                        placeholder="{{ __('timelines.case_name_placeholder') }}"
                    />
                    <flux:error name="caseName" />
                </flux:field>

                {{-- Case Reference --}}
                <flux:field>
                    <flux:label>{{ __('timelines.case_reference') }} <span class="text-zinc-400">({{ __('common.optional') }})</span></flux:label>
                    <flux:input
                        wire:model="caseReference"
                        type="text"
                        placeholder="{{ __('timelines.case_reference_placeholder') }}"
                    />
                    <flux:error name="caseReference" />
                </flux:field>
            </div>

            {{-- Initial Notes --}}
            <flux:field>
                <flux:label>{{ __('timelines.initial_notes') }} <span class="text-zinc-400">({{ __('common.optional') }})</span></flux:label>
                <flux:textarea
                    wire:model="initialNotes"
                    rows="4"
                    placeholder="{{ __('timelines.initial_notes_placeholder') }}"
                />
                <flux:error name="initialNotes" />
            </flux:field>

            <div class="flex items-center justify-end gap-4 border-t border-zinc-200 pt-6 ">
                <flux:button variant="outline" :href="route('admin.dashboard')" wire:navigate>
                    {{ __('timelines.cancel') }}
                </flux:button>
                <flux:button variant="primary" type="submit">
                    {{ __('timelines.create') }}
                </flux:button>
            </div>
        </form>
    </div>
</div>