<?php

use App\Services\ContactSubmissionService;
use Illuminate\Support\Facades\RateLimiter;
use Livewire\Attributes\Validate;
use Livewire\Component;

new class extends Component
{
    #[Validate('required|string|max:100')]
    public string $first_name = '';

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

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

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

    #[Validate('required|string|in:A free first class,Membership options,Private 1:1 coaching,Corporate / group sessions,Something else')]
    public string $interest = 'A free first class';

    #[Validate('required|string|max:5000')]
    public string $message = '';

    public bool $submitted = false;

    public function submit(ContactSubmissionService $service): void
    {
        $key = 'contact-form:'.request()->ip();

        if (RateLimiter::tooManyAttempts($key, 5)) {
            $this->addError('email', 'Too many submissions. Please try again later.');

            return;
        }

        RateLimiter::hit($key, 60);

        $this->validate();

        $service->store([
            'first_name' => $this->first_name,
            'last_name' => $this->last_name,
            'email' => $this->email,
            'phone' => $this->phone,
            'interest' => $this->interest,
            'message' => $this->message,
        ], request()->ip());

        $this->submitted = true;
        $this->reset(['first_name', 'last_name', 'email', 'phone', 'message']);
        $this->interest = 'A free first class';
    }
};
?>

<div>
    @if ($submitted)
        <div class="form-success show">Thanks &mdash; your message is on its way. We&rsquo;ll be in touch within one business day. See you on the canvas.</div>
    @endif

    @if (! $submitted)
        <form wire:submit="submit" id="contact-form" novalidate>
            <div class="form-row">
                <div class="field">
                    <label for="fn">First name</label>
                    <input id="fn" wire:model="first_name" type="text" placeholder="Your name" required>
                    @error('first_name') <span style="color:var(--brass-br);font-size:13px">{{ $message }}</span> @enderror
                </div>
                <div class="field">
                    <label for="ln">Last name</label>
                    <input id="ln" wire:model="last_name" type="text" placeholder="Surname">
                    @error('last_name') <span style="color:var(--brass-br);font-size:13px">{{ $message }}</span> @enderror
                </div>
            </div>
            <div class="form-row">
                <div class="field">
                    <label for="em">Email</label>
                    <input id="em" wire:model="email" type="email" placeholder="you@email.com" required>
                    @error('email') <span style="color:var(--brass-br);font-size:13px">{{ $message }}</span> @enderror
                </div>
                <div class="field">
                    <label for="ph">Phone</label>
                    <input id="ph" wire:model="phone" type="tel" placeholder="+971 …">
                    @error('phone') <span style="color:var(--brass-br);font-size:13px">{{ $message }}</span> @enderror
                </div>
            </div>
            <div class="field">
                <label for="int">I&rsquo;m interested in</label>
                <select id="int" wire:model="interest">
                    <option>A free first class</option>
                    <option>Membership options</option>
                    <option>Private 1:1 coaching</option>
                    <option>Corporate / group sessions</option>
                    <option>Something else</option>
                </select>
                @error('interest') <span style="color:var(--brass-br);font-size:13px">{{ $message }}</span> @enderror
            </div>
            <div class="field">
                <label for="msg">Message</label>
                <textarea id="msg" wire:model="message" placeholder="Tell us a little about your goals…"></textarea>
                @error('message') <span style="color:var(--brass-br);font-size:13px">{{ $message }}</span> @enderror
            </div>
            <button type="submit" class="btn btn-primary btn-lg" style="width:100%;justify-content:center" wire:loading.attr="disabled">
                <span wire:loading.remove>Send message <span class="arrow">&rarr;</span></span>
                <span wire:loading>Sending&hellip;</span>
            </button>
        </form>
    @endif
</div>
