@props(['lead' => [], 'countries' => [], 'states' => []])


<div class="address-section">
    <div class="row mt-2 ">
        <h4 class="text-primary mb-3">Address</h4>

        <div class="col-md-3">
            <x-input-label for="address" :value="__('Street')" />
            <x-text-input id="address" placeholder="Enter Street" name="address" :value="$lead['address'] ?? ''" />
        </div>
        <div class="col-md-3">
            <x-input-label for="city" :value="__('City')" />
            <x-text-input id="city" placeholder="Enter City" name="city" :value="$lead['city'] ?? ''" />
        </div>
        <div class="mb-3 col-md-3">
            <label class="form-label" for="property_state">State</label>
            <x-text-input
                id="property_state"
                name="state"
                class="form-control"
                placeholder="Enter State"
                :value="old('state') ?? ($lead['state'] ?? '')"
            />
        </div>
        <div class="col-md-3">
            <x-input-label for="zipcode" :value="__('Zip Code / Postal Code')" />
            <x-text-input id="zipcode" placeholder="Enter Zip code / Postal Code" pattern="\d{10}" maxlength="10" name="zip_code"
                :value="$lead['zip_code'] ?? ''" />
        </div>
        <div class="col-md-3">
            <x-input-label for="county" :value="__('County')" />
            <x-text-input id="county" placeholder="Enter County" name="county" :value="$lead['county'] ?? ''" />
        </div>

        {{-- <div class="mb-3 col-md-3">
            <label class="form-label">Country</label>
            <select class="select2-with-label-single js-states d-block" id="country" name="country">
                <option value="">Choose...</option>
                @foreach ($countries as $country)
                    <option value="{{ $country }}" @selected(($lead['country'] ?? 'United States') == $country)>
                        {{ $country }}
                    </option>
                @endforeach
            </select>
        </div> --}}


        <div class="col-md-3">
            <x-input-label for="township" :value="__('Township')" />
            <x-text-input id="township" placeholder="Enter Township" name="township" :value="$lead['township'] ?? ''" />
        </div>
        <div class="col-md-3">
            <x-input-label for="subdivision" :value="__('Subdivision')" />
            <x-text-input id="subdivision" placeholder="Enter Subdivision" name="subdivision" :value="$lead['subdivision'] ?? ''" />
        </div>
        <div class="col-md-3">
            <x-input-label for="APN Number" :value="__('APN Number')" />
            <x-text-input id="APN Number" placeholder="Enter APN Number" name="apn_number"
                pattern="\d{5}" :value="$lead['apn_number'] ?? ''" />
        </div>
    </div>
    <div class="row mt-3">

        <div class="mb-3 col-md-3">
            <label class="form-label" for="country">Country</label>
            <x-text-input
                id="country"
                name="country"
                class="form-control"
                placeholder="Enter Country Name"
                :value="old('country') ?? ($lead['country'] ?? '')"
            />
        </div>
    </div>
</div>