@csrf

<div class="profile-form-heading">
    <div class="profile-form-heading-icon" aria-hidden="true">
        <i class="fa-solid fa-building"></i>
    </div>
    <div>
        <p class="profile-form-eyebrow">Client record</p>
        <h2 class="profile-form-title">Business profile</h2>
        <p class="profile-form-heading-copy">Business, contact, and billing details.</p>
    </div>
</div>

<div class="profile-form-section">
    <div class="profile-form-section-heading">
        <span class="profile-form-section-number">01</span>
        <div>
            <h3 class="profile-form-section-title">Business identity</h3>
            <p class="profile-form-section-copy">Core account information.</p>
        </div>
    </div>

    <div class="profile-form-grid">
        <div class="profile-form-field md:col-span-2">
            <label for="name" class="profile-form-label">
                Client / business name <span class="profile-form-required" aria-hidden="true">*</span>
            </label>
            <div class="profile-form-control-wrap">
                <i class="fa-solid fa-building profile-form-control-icon" aria-hidden="true"></i>
                <input id="name" name="name" type="text" value="{{ old('name', $client->name ?? '') }}"
                    placeholder="Registered or trading name" autocomplete="organization"
                    class="text-input profile-form-control @error('name') profile-form-control-error @enderror"
                    @error('name') aria-invalid="true" aria-describedby="name-error" @enderror required>
            </div>
            @error('name')<p id="name-error" class="profile-form-error">{{ $message }}</p>@enderror
        </div>

        <div class="profile-form-field">
            <label for="department" class="profile-form-label">Department</label>
            <div class="profile-form-control-wrap">
                <i class="fa-solid fa-layer-group profile-form-control-icon" aria-hidden="true"></i>
                <input id="department" name="department" type="text" value="{{ old('department', $client->department ?? '') }}"
                    placeholder="e.g. Finance or Marketing" autocomplete="organization-title"
                    class="text-input profile-form-control @error('department') profile-form-control-error @enderror"
                    @error('department') aria-invalid="true" aria-describedby="department-error" @enderror>
            </div>
            @error('department')<p id="department-error" class="profile-form-error">{{ $message }}</p>@enderror
        </div>

        <div class="profile-form-field">
            <label for="contact_person" class="profile-form-label">Client representative</label>
            <div class="profile-form-control-wrap">
                <i class="fa-solid fa-user profile-form-control-icon" aria-hidden="true"></i>
                <input id="contact_person" name="contact_person" type="text" value="{{ old('contact_person', $client->contact_person ?? '') }}"
                    placeholder="Primary contact person" autocomplete="name"
                    class="text-input profile-form-control @error('contact_person') profile-form-control-error @enderror"
                    @error('contact_person') aria-invalid="true" aria-describedby="contact-person-error" @enderror>
            </div>
            @error('contact_person')<p id="contact-person-error" class="profile-form-error">{{ $message }}</p>@enderror
        </div>
    </div>
</div>

<div class="profile-form-section">
    <div class="profile-form-section-heading">
        <span class="profile-form-section-number">02</span>
        <div>
            <h3 class="profile-form-section-title">Contact</h3>
            <p class="profile-form-section-copy">Communication and account contacts.</p>
        </div>
    </div>

    <div class="profile-form-grid">
        <div class="profile-form-field">
            <label for="email" class="profile-form-label">Email address</label>
            <div class="profile-form-control-wrap">
                <i class="fa-solid fa-envelope profile-form-control-icon" aria-hidden="true"></i>
                <input id="email" name="email" type="email" value="{{ old('email', $client->email ?? '') }}"
                    placeholder="accounts@business.com" autocomplete="email" inputmode="email"
                    class="text-input profile-form-control @error('email') profile-form-control-error @enderror"
                    @error('email') aria-invalid="true" aria-describedby="email-error" @enderror>
            </div>
            @error('email')<p id="email-error" class="profile-form-error">{{ $message }}</p>@enderror
        </div>

        <div class="profile-form-field">
            <label for="phone" class="profile-form-label">Phone</label>
            <div class="profile-form-control-wrap">
                <i class="fa-solid fa-phone profile-form-control-icon" aria-hidden="true"></i>
                <input id="phone" name="phone" type="tel" value="{{ old('phone', $client->phone ?? '') }}"
                    placeholder="Business phone number" autocomplete="tel" inputmode="tel"
                    class="text-input profile-form-control @error('phone') profile-form-control-error @enderror"
                    @error('phone') aria-invalid="true" aria-describedby="phone-error" @enderror>
            </div>
            @error('phone')<p id="phone-error" class="profile-form-error">{{ $message }}</p>@enderror
        </div>

        <div class="profile-form-field">
            <label for="fax" class="profile-form-label">Fax</label>
            <div class="profile-form-control-wrap">
                <i class="fa-solid fa-fax profile-form-control-icon" aria-hidden="true"></i>
                <input id="fax" name="fax" type="tel" value="{{ old('fax', $client->fax ?? '') }}"
                    placeholder="Optional fax number" inputmode="tel"
                    class="text-input profile-form-control @error('fax') profile-form-control-error @enderror"
                    @error('fax') aria-invalid="true" aria-describedby="fax-error" @enderror>
            </div>
            @error('fax')<p id="fax-error" class="profile-form-error">{{ $message }}</p>@enderror
        </div>

        <div class="profile-form-field">
            <label for="website" class="profile-form-label">Website</label>
            <div class="profile-form-control-wrap">
                <i class="fa-solid fa-globe profile-form-control-icon" aria-hidden="true"></i>
                <input id="website" name="website" type="url" value="{{ old('website', $client->website ?? '') }}"
                    placeholder="https://example.com" autocomplete="url" inputmode="url"
                    class="text-input profile-form-control @error('website') profile-form-control-error @enderror"
                    @error('website') aria-invalid="true" aria-describedby="website-error" @enderror>
            </div>
            @error('website')<p id="website-error" class="profile-form-error">{{ $message }}</p>@enderror
        </div>
    </div>
</div>

<div class="profile-form-section">
    <div class="profile-form-section-heading">
        <span class="profile-form-section-number">03</span>
        <div>
            <h3 class="profile-form-section-title">Billing</h3>
            <p class="profile-form-section-copy">Used for documents and tax records.</p>
        </div>
    </div>

    <div class="profile-form-grid">
        <div class="profile-form-field md:col-span-2">
            <label for="address" class="profile-form-label">Business address</label>
            <div class="profile-form-control-wrap profile-form-control-wrap-textarea">
                <i class="fa-solid fa-location-dot profile-form-control-icon" aria-hidden="true"></i>
                <textarea id="address" name="address" rows="3" placeholder="Street address and postal details"
                    autocomplete="street-address"
                    class="text-input profile-form-control profile-form-textarea @error('address') profile-form-control-error @enderror"
                    @error('address') aria-invalid="true" aria-describedby="address-error" @enderror>{{ old('address', $client->address ?? '') }}</textarea>
            </div>
            @error('address')<p id="address-error" class="profile-form-error">{{ $message }}</p>@enderror
        </div>

        <div class="profile-form-field">
            <label for="city" class="profile-form-label">City</label>
            <div class="profile-form-control-wrap">
                <i class="fa-solid fa-city profile-form-control-icon" aria-hidden="true"></i>
                <input id="city" name="city" type="text" value="{{ old('city', $client->city ?? '') }}"
                    placeholder="City or locality" autocomplete="address-level2"
                    class="text-input profile-form-control @error('city') profile-form-control-error @enderror"
                    @error('city') aria-invalid="true" aria-describedby="city-error" @enderror>
            </div>
            @error('city')<p id="city-error" class="profile-form-error">{{ $message }}</p>@enderror
        </div>

        <div class="profile-form-field">
            <label for="vat_number" class="profile-form-label">VAT number</label>
            <div class="profile-form-control-wrap">
                <i class="fa-solid fa-receipt profile-form-control-icon" aria-hidden="true"></i>
                <input id="vat_number" name="vat_number" type="text" value="{{ old('vat_number', $client->vat_number ?? '') }}"
                    placeholder="Registered VAT number" inputmode="numeric"
                    class="text-input profile-form-control @error('vat_number') profile-form-control-error @enderror"
                    @error('vat_number') aria-invalid="true" aria-describedby="vat-number-error" @enderror>
            </div>
            @error('vat_number')<p id="vat-number-error" class="profile-form-error">{{ $message }}</p>@enderror
        </div>
    </div>
</div>

<div class="profile-form-actions">
    <a href="{{ route('clients.index') }}" class="secondary-button">Cancel</a>
    <button type="submit" class="primary-button">
        <i class="fa-solid fa-check" aria-hidden="true"></i>
        {{ $submitLabel }}
    </button>
</div>