@php($user = auth()->user())

<x-storefront.account-page title="Personal Information">
    {{-- Initials instead of a photo: the shop shows no uploaded images. --}}
    <div class="sm-account-avatar" aria-hidden="true">{{ Str::upper(Str::substr($firstName, 0, 1).Str::substr($lastName, 0, 1)) }}</div>

    <form method="POST" action="{{ route('account.update') }}" class="row g-3 sm-account-form">
        @csrf
        @method('PUT')

        @foreach ([
            ['first_name', 'First Name', 'text', 'given-name', $firstName, \App\Http\Requests\Storefront\AccountProfileRequest::NAME_PART_MAX, 'col-sm-6'],
            ['last_name', 'Last Name', 'text', 'family-name', $lastName, \App\Http\Requests\Storefront\AccountProfileRequest::NAME_PART_MAX, 'col-sm-6'],
            ['email', 'Email', 'email', 'email', $user->email, 150, ''],
            ['phone', 'Phone', 'tel', 'tel', $user->phone, 30, ''],
        ] as [$field, $label, $type, $autocomplete, $value, $maxLength, $column])
            <div class="col-12 {{ $column }}">
                <label class="form-label" for="account-{{ $field }}">{{ $label }} <span aria-hidden="true">*</span></label>
                <input id="account-{{ $field }}" name="{{ $field }}" type="{{ $type }}" value="{{ old($field, $value) }}" autocomplete="{{ $autocomplete }}" maxlength="{{ $maxLength }}" required @if ($field === 'phone') pattern="{{ \App\Http\Requests\Storefront\CheckoutRequest::PHONE_HTML_PATTERN }}" placeholder="01712345678" title="A Bangladeshi mobile number, such as 01712345678" @endif @class(['form-control rounded-pill', 'is-invalid' => $errors->has($field)]) @error($field) aria-describedby="account-{{ $field }}-error" @enderror>
                @error($field)
                    <div id="account-{{ $field }}-error" class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>
        @endforeach

        <div class="col-12">
            <label class="form-label" for="account-gender">Gender <span aria-hidden="true">*</span></label>
            <select id="account-gender" name="gender" required @class(['form-select rounded-pill', 'is-invalid' => $errors->has('gender')]) @error('gender') aria-describedby="account-gender-error" @enderror>
                <option value="" @selected(old('gender', $user->gender) === null)>Choose…</option>
                @foreach (\App\Http\Requests\Storefront\AccountProfileRequest::GENDERS as $gender)
                    <option value="{{ $gender }}" @selected(old('gender', $user->gender) === $gender)>{{ $gender }}</option>
                @endforeach
            </select>
            @error('gender')
                <div id="account-gender-error" class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

        <div class="col-12">
            <button class="btn sm-btn-primary rounded-pill" type="submit">Update Changes</button>
        </div>
    </form>
</x-storefront.account-page>