<?php

namespace App\Http\Livewire;

use Livewire\Component;
use App\Models\DummyTask;

class RealTimeValidationExample extends Component
{
    public string $title = '';
    public string $description = '';

    protected $rules = [
        'title' => ['required', 'min:3'],
        'description' => ['required', 'min:20'],
    ];

    public function updated($propertyName)
    {
        $this->validateOnly($propertyName);
    }

    public function render()
    {
        return view('livewire.real-time-validation-example');
    }

    public function submit()
    {

        $this->validate();

        DummyTask::create([
            'title' => $this->title,
            'description' => $this->description,
        ]);

        $this->reset(['title', 'description']);

        session()->flash('success', 'Task created successfully');
    }
}

<div class="py-5">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-12 col-md-10 col-lg-8 text-center">
                <!-- Heading -->
                <h2 class="fw-bold blue-heading">
                    Realtime Validation Example Component
                </h2>
            </div>
        </div> <!-- / .row -->
        <div class="row justify-content-md-center">
            <div class="col-12">
                @include('partials.alerts')
            </div>
        </div>

        <form wire:submit.prevent="submit">
            <div class="row justify-content-md-center">
                <div class="col-12 col-md-12">
                    <div class="form-group mb-3">
                        <!-- Label -->
                        <label class="form-label" for="title">
                            Title
                        </label>
                        <!-- Input -->
                        <input class="form-control @error('title') is-invalid @enderror" id="title" type="text"
                            placeholder="Enter Title" wire:model.lazy="title">
                        @error('title')
                            <div id="invalidTitleFeedback" class="invalid-feedback">
                                {{ $message }}
                            </div>
                        @enderror
                    </div>
                </div>
            </div> <!-- / .row -->
            <div class="row">
                <div class="col-12">
                    <div class="form-group mb-5">
                        <!-- Label -->
                        <label class="form-label" for="description">Description</label>
                        <!-- Input -->
                        <textarea class="form-control @error('description') is-invalid @enderror" id="description" rows="5"
                            placeholder="Enter Description" spellcheck="false" data-gramm="false"
                            wire:model.lazy="description"></textarea>
                        @error('description')
                            <div id="invalidDescriptionFeedback" class="invalid-feedback">
                                {{ $message }}
                            </div>
                        @enderror
                    </div>
                </div>
            </div> <!-- / .row -->
            <div class="row justify-content-center">
                <div class="col-auto">
                    <!-- Submit -->
                    <button type="submit" class="btn btn-primary text-white lift">
                        Submit
                    </button>
                </div>
            </div> <!-- / .row -->
            <div class="my-3 text-gray-600">
                Test out real time validation by typing less than 3 characters in title field, or less than 20 characters in description field. Moving to another field should trigger an error message.
            </div>
        </form>
    </div>
</div>

@livewire('real-time-validation-example')