{{--
    Shared member detail fields for the create and edit screens.

    $member  - App\Models\Profile|null (edit mode when present)
    $sex, $blood_group, $interested_for - config('constants') lookups
    $profile_image_path, $nid_image_path - configured upload paths

    Field names, values and validation keys are unchanged from the original
    forms; only the markup has moved onto the design system.
--}}
@php
    $member = $member ?? null;
    $value = fn (string $key, $default = null) => old($key, $member->{$key} ?? $default);
@endphp

<div class="form-section">
    <h2 class="form-section__title">Personal details</h2>
    <p class="form-section__description">Identity and contact information for the member.</p>

    <div class="form-grid">
        <x-field label="Full name" name="fullname" :required="true" span="6">
            <input type="text" id="fullname" name="fullname" class="input @error('fullname') is-invalid @enderror"
                   value="{{ $value('fullname') }}" required autocomplete="name"
                   @error('fullname') aria-invalid="true" aria-describedby="fullname-error" @enderror>
        </x-field>

        <x-field label="Age" name="age" :required="true" span="6">
            <input type="text" id="age" name="age" class="input @error('age') is-invalid @enderror"
                   value="{{ $value('age') }}" required inputmode="numeric"
                   @error('age') aria-invalid="true" aria-describedby="age-error" @enderror>
        </x-field>

        <x-field label="Sex" name="sex" :required="true" span="6">
            <select id="sex" name="sex" class="select @error('sex') is-invalid @enderror" required
                    @error('sex') aria-invalid="true" aria-describedby="sex-error" @enderror>
                <option value="">Select…</option>
                @foreach ($sex as $key => $label)
                    <option value="{{ $key }}" @selected((string) $value('sex') === (string) $key)>{{ ucwords($label) }}</option>
                @endforeach
            </select>
        </x-field>

        <x-field label="Nationality" name="nationality" :required="true" span="6">
            <input type="text" id="nationality" name="nationality" class="input @error('nationality') is-invalid @enderror"
                   value="{{ $value('nationality') }}" required
                   @error('nationality') aria-invalid="true" aria-describedby="nationality-error" @enderror>
        </x-field>

        <x-field label="Occupation" name="occupation" :required="true" span="6">
            <input type="text" id="occupation" name="occupation" class="input @error('occupation') is-invalid @enderror"
                   value="{{ $value('occupation') }}" required
                   @error('occupation') aria-invalid="true" aria-describedby="occupation-error" @enderror>
        </x-field>

        <x-field label="Phone number" name="phone_number" span="6">
            <input type="text" id="phone_number" name="phone_number" class="input @error('phone_number') is-invalid @enderror"
                   value="{{ $value('phone_number') }}" inputmode="tel" autocomplete="tel">
        </x-field>

        <x-field label="Height" name="height" :required="true" span="4" hint="e.g. 5'8&quot; or 173 cm">
            <input type="text" id="height" name="height" class="input @error('height') is-invalid @enderror"
                   value="{{ $value('height') }}" required>
        </x-field>

        <x-field label="Weight" name="weight" :required="true" span="4" hint="e.g. 72 kg">
            <input type="text" id="weight" name="weight" class="input @error('weight') is-invalid @enderror"
                   value="{{ $value('weight') }}" required>
        </x-field>

        <x-field label="Blood group" name="blood_group" span="4">
            <select id="blood_group" name="blood_group" class="select">
                <option value="">Select…</option>
                @foreach ($blood_group as $key => $label)
                    <option value="{{ $key }}" @selected((string) $value('blood_group') === (string) $key)>{{ $label }}</option>
                @endforeach
            </select>
        </x-field>

        <x-field label="Present address" name="present_address" :required="true" span="12">
            <input type="text" id="present_address" name="present_address" class="input @error('present_address') is-invalid @enderror"
                   value="{{ $value('present_address') }}" required autocomplete="street-address"
                   @error('present_address') aria-invalid="true" aria-describedby="present_address-error" @enderror>
        </x-field>

        <x-field label="Emergency contact" name="emergency_contact" span="6">
            <input type="text" id="emergency_contact" name="emergency_contact" class="input"
                   value="{{ $value('emergency_contact') }}" inputmode="tel">
        </x-field>

        <x-field
            label="NID / Passport / Birth certificate / Student ID"
            name="identification_id"
            span="6"
            hint="Optional"
        >
            <input type="text" id="identification_id" name="identification_id" class="input"
                   value="{{ $value('identification_id') }}">
        </x-field>
    </div>
</div>

<div class="form-section">
    <h2 class="form-section__title">Membership</h2>
    <p class="form-section__description">Registration details and training interest.</p>

    <div class="form-grid">
        <x-field label="Registration date" name="registration_date" :required="true" span="6">
            <div class="input-group">
                <input
                    type="text"
                    id="registration_date"
                    name="registration_date"
                    class="input date-picker @error('registration_date') is-invalid @enderror"
                    value="{{ old('registration_date', $member && $member->registration_date ? date('d-m-Y', strtotime($member->registration_date)) : '') }}"
                    data-date-format="dd-mm-yyyy"
                    placeholder="dd-mm-yyyy"
                    readonly
                    required
                >
                <span class="input-group__addon" aria-hidden="true"><i class="fa-solid fa-calendar-days"></i></span>
            </div>
        </x-field>

        <x-field label="Gym ID" name="gym_id" span="6">
            <input type="text" id="gym_id" name="gym_id" class="input" value="{{ $value('gym_id') }}">
        </x-field>

        <x-field label="Interested to get enrolled in" name="interested_for" :required="true" span="12">
            <div class="choice-group">
                @foreach ($interested_for as $key => $label)
                    <label class="choice">
                        <input type="radio" name="interested_for" value="{{ $key }}"
                               @checked((string) $value('interested_for') === (string) $key) required>
                        <span>{{ ucwords($label) }}</span>
                    </label>
                @endforeach
            </div>
        </x-field>

        <x-field label="Have you ever worked out anywhere before?" name="workout_history" :required="true" span="6">
            <div class="choice-group">
                <label class="choice">
                    <input type="radio" name="workout_history" value="1" @checked((string) $value('workout_history') === '1')>
                    <span>Yes</span>
                </label>
                <label class="choice">
                    <input type="radio" name="workout_history" value="0" @checked((string) $value('workout_history') === '0')>
                    <span>No</span>
                </label>
            </div>
        </x-field>

        <x-field label="Are you suffering from any disease?" name="health_problem" :required="true" span="6">
            <div class="choice-group">
                <label class="choice">
                    <input type="radio" name="health_problem" value="1" @checked((string) $value('health_problem') === '1')>
                    <span>Yes</span>
                </label>
                <label class="choice">
                    <input type="radio" name="health_problem" value="0" @checked((string) $value('health_problem') === '0')>
                    <span>No</span>
                </label>
            </div>
        </x-field>
    </div>
</div>

<div class="form-section">
    <h2 class="form-section__title">Documents</h2>
    <p class="form-section__description">JPG or PNG, up to 10 MB each.</p>

    <div class="form-grid">
        <x-field label="Photo" name="pic" span="6">
            <div class="upload">
                <x-photo
                    :path="$profile_image_path"
                    :file="$member->pic ?? null"
                    alt="Current member photo"
                    class="upload__preview"
                    id="preview-pic"
                />
                <div class="upload__control">
                    <input type="file" id="pic" name="pic" class="input @error('pic') is-invalid @enderror"
                           accept="image/jpeg,image/png" data-preview-target="#preview-pic">
                </div>
            </div>
        </x-field>

        <x-field label="NID scan" name="nid" span="6">
            <div class="upload">
                <x-photo
                    :path="$nid_image_path"
                    :file="$member->nid ?? null"
                    fallback="images/blank.png"
                    alt="Current NID scan"
                    class="upload__preview"
                    id="preview-nid"
                />
                <div class="upload__control">
                    <input type="file" id="nid" name="nid" class="input @error('nid') is-invalid @enderror"
                           accept="image/jpeg,image/png" data-preview-target="#preview-nid">
                </div>
            </div>
        </x-field>
    </div>
</div>