<?php
    use function Laravel\Folio\{middleware, name};
    use Livewire\Attributes\Validate;
    use Livewire\Volt\Component;
    use App\Models\Client;
    middleware('auth');
    name('clients.edit');

    new class extends Component
    {
        public Client $client;

        #[Validate('required|min:2|max:255')]
        public $firstname = '';

        #[Validate('required|min:2|max:255')]
        public $lastname = '';

        #[Validate('required|min:8|max:20')]
        public $phone_number = '';

        #[Validate('nullable|string|max:255')]
        public $adress = '';

        #[Validate('nullable|string|max:50')]
        public $taxNumber = '';

        public function mount()
        {
            $clientId = request()->route('id');
            $this->client = Client::findOrFail($clientId);
            $this->firstname = $this->client->firstname;
            $this->lastname = $this->client->lastname;
            $this->phone_number = $this->client->phone_number;
            $this->adress = $this->client->adress ?? '';
            $this->taxNumber = $this->client->taxNumber ?? '';
        }

        public function save()
        {
            $validated = $this->validate();

            // Update the client
            $this->client->update([
                'firstname' => $validated['firstname'],
                'lastname' => $validated['lastname'],
                'phone_number' => $validated['phone_number'],
                'adress' => ($validated['adress'] ?? '') !== '' ? $validated['adress'] : null,
                'taxNumber' => ($validated['taxNumber'] ?? '') !== '' ? $validated['taxNumber'] : null,
            ]);

            session()->flash('message', 'Client updated successfully.');

            $this->redirect(route('clients'));
        }
    }
?>

<x-layouts.app>
    @volt('clients.edit')
        <x-app.container class="max-w-full">

            <x-elements.back-button
                class="max-w-full mx-auto mb-3"
                text="Retour à la liste des clients"
                :href="route('clients')"
            />

            <div class="flex items-center justify-between mb-3">
                <x-app.heading
                        title="Modifier le client"
                        description="Mettre à jour les informations du client"
                        :border="false"
                    />
            </div>

            <form wire:submit="save" class="space-y-4">
                <div>
                    <label for="firstname" class="block mb-2 text-sm font-medium text-gray-700">Prénom</label>
                    <input type="text" id="firstname" wire:model="firstname" class="block w-full mt-1 border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
                    @error('firstname') <span class="text-xs text-red-500">{{ $message }}</span> @enderror
                </div>

                <div>
                    <label for="lastname" class="block mb-2 text-sm font-medium text-gray-700">Nom</label>
                    <input type="text" id="lastname" wire:model="lastname" class="block w-full mt-1 border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
                    @error('lastname') <span class="text-xs text-red-500">{{ $message }}</span> @enderror
                </div>

                <div>
                    <label for="phone_number" class="block mb-2 text-sm font-medium text-gray-700">Numéro de téléphone</label>
                    <input type="tel" id="phone_number" wire:model="phone_number" class="block w-full mt-1 border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
                    @error('phone_number') <span class="text-xs text-red-500">{{ $message }}</span> @enderror
                </div>

                <div>
                    <label for="adress" class="block mb-2 text-sm font-medium text-gray-700">Adresse</label>
                    <input type="text" id="adress" wire:model="adress" class="block w-full mt-1 border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
                    @error('adress') <span class="text-xs text-red-500">{{ $message }}</span> @enderror
                </div>

                <div>
                    <label for="taxNumber" class="block mb-2 text-sm font-medium text-gray-700">Matricule fiscale</label>
                    <input type="text" id="taxNumber" wire:model="taxNumber" class="block w-full mt-1 border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
                    @error('taxNumber') <span class="text-xs text-red-500">{{ $message }}</span> @enderror
                </div>

                <div>
                    <x-button type="submit">
                        Mettre à jour le client
                    </x-button>
                </div>
            </form>
        </x-app.container>
    @endvolt
</x-layouts.app>

