@php
    /** @var \App\Models\RefugeeFamily[] $family */
@endphp

<div class="form-row">
    <div class="col-sm-6">
        {{--ID--}}
        @include('components.form.static_text_row', [
            'name' => 'id',
            'label' => 'ID',
            'validation' => 'maxLength="4" pattern="^[A-Z1-9]?\d{3}$"',
            'label_class' => 'col-md-4',
            'input_class' => 'col-md-8',
            'value' => $family->id,
        ])
    </div>
    <div class="col-sm-6">
        @include('components.form.input_toggle_radio_static_row', [
            'label' => 'Gender',
            'name' => 'gender_id',
            'value' => $family->gender_id,
            'label_class' => 'col-md-4',
            'input_class' => 'col-md-8',
            'items' => [
                [
                    'label' => 'Male',
                    'value' => '0',
                ],
                [
                    'label' => 'Female',
                    'value' => '1',
                ],
            ],
        ])
    </div>
</div>

{{--Name--}}
<div class="form-row">
    <div class="col-sm-6">
        @include('components.form.input_row', [
            'name' => 'first_name',
            'label' => 'First Name',
            'validation' => 'maxLength="30"',
            'label_class' => 'col-md-4',
            'input_class' => 'col-md-8',
            'value' => $family->first_name,
        ])
    </div>
    <div class="col-sm-6">
        @include('components.form.input_row', [
            'name' => 'last_name',
            'label' => 'Last Name',
            'validation' => 'maxLength="30"',
            'label_class' => 'col-md-4',
            'input_class' => 'col-md-8',
            'value' => $family->last_name,
        ])
    </div>
</div>

{{--Country of Origin & Race--}}
<div class="form-group form-row">
    <div class="col-sm-6">
        <div class="form-row">
            <label for="country_id" class="col-md-4 col-form-label py-2 py-md-0 py-lg-2">
                Country of Origin <span class="text-danger">*</span>
            </label>
            <div class="col-md-8">
                <select id="country_id" name="country_id" class="form-control {{ $errors->first('country_id', 'is-invalid') }}" required>
                    <option value="">Please select...</option>
                    <optgroup label="Common">
                        @foreach($countries->where('is_preferred', 1) as $country)
                            <option value="{{ $country->id }}">{{ $country->name }}</option>
                        @endforeach
                    </optgroup>
                    <optgroup label="All">
                        @foreach($countries as $country)
                            <option value="{{ old('country_id', $country->id ?? '') }}"
                                    {!! (old('country_id', $country->id ?? '') == $family->country_id) ? 'selected' : '' !!}>{{ $country->name }}</option>
                        @endforeach
                    </optgroup>
                </select>
                <span class="invalid-feedback">
                    {{ $errors->first('country_id', ':message') }}
                </span>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="form-row">
            <label for="race_id" class="col-md-4 col-form-label py-2">
                Race <span class="text-danger">*</span>
            </label>
            <div class="col-md-8">
                <select id="race_id" name="race_id" class="form-control {{ $errors->first('race_id', 'is-invalid') }}" required>
                    <option value="">Please select...</option>
                    @foreach($races as $race)
                        <option value="{{ old('race_id', $race->id ?? '') }}" {!! (old('race_id', $race->id ?? '') == $family->race_id) ? 'selected' : '' !!}>{{ $race->name }}</option>
                    @endforeach
                </select>
                <span class="invalid-feedback">
                    {{ $errors->first('race_id', ':message') }}
                </span>
            </div>
        </div>
    </div>
</div>

{{--Date of Birth & Phone Number--}}
<div class="form-row">
    <div class="col-sm-6">
        @include('components.form.input_row', [
            'type' => 'date',
            'name' => 'date_of_birth',
            'label' => 'Date of Birth',
            'validation' => 'max="' . date('Y-m-d') . '"',
            'label_class' => 'col-md-4',
            'input_class' => 'col-md-8',
            'value' => $family->date_of_birth,
        ])
    </div>
    <div class="col-sm-6">
        @include('components.form.input_row', [
            'type' => 'tel',
            'name' => 'phone_number',
            'label' => 'Phone No.',
            'validation' => 'maxLength="10" placeholder="4694537777"',
            'label_class' => 'col-md-4',
            'input_class' => 'col-md-8',
            'optional' => true,
            'value' => $family->phone_number,
        ])
    </div>
</div>

{{--Address--}}
@include('components.form.input_address', [
    'states' => $states,
    'address_line1' => 'address_line1',
    'address_line2' => 'address_line2',
    'city' => 'city',
    'state' => 'state_id',
    'country' => 'country',
    'zip' => 'zip',
    'value' => [
        'address_line1' => $family->address_line1,
        'address_line2' => $family->address_line2,
        'city' => $family->city,
        'state' => $family->state_id,
        'country' => $family->country,
        'zip' => $family->zip,
    ]
])

{{--Pregnant--}}
<div class="form-row">
    <div class="col-sm-6">
        @php($is_pregnant = old('is_pregnant', $family->pregnant_due_date ?? '') ? 'yes' : 'no')
        @include('components.form.input_toggle_radio_static_row', [
            'label' => 'Pregnant',
            'name' => 'is_pregnant',
            'label_class' => 'col-md-4',
            'input_class' => 'col-md-8',
            'value' => $is_pregnant,
            'items' => [
                [
                    'label' => 'No',
                    'value' => 'no',
                ],
                [
                    'label' => 'Yes',
                    'value' => 'yes',
                ],
            ],
        ])
    </div>
    <div id="pregnant_due_date_group" class="col-sm-6"
         style="display: {!! ($is_pregnant == 'yes') ? 'block' : 'none' !!};">
        <div class="form-row">
            <label for="pregnant_due_date" class="col-md-4 col-form-label">Due Date</label>
            <div class="col-md-8">
                <input id="pregnant_due_date" name="pregnant_due_date" class=" form-control {{ $errors->first('pregnant_due_date', 'is-invalid') }}"
                       type="date" value="{{ old('pregnant_due_date', $family->pregnant_due_date ?? '') }}">
                <span class="invalid-feedback">
                    {{ $errors->first('pregnant_due_date', ':message') }}
                </span>
            </div>
        </div>
    </div>
</div>

{{--Additional Notes--}}
@include('components.form.textarea_row', [
    'name' => 'note',
    'label' => 'Additional Notes',
    'validation' => 'maxLength="170"',
    'label_class' => 'col-md-2',
    'input_class' => 'col-md-10',
    'optional' => true,
    'rows' => 3,
    'value' => $family->note,
])