@php($isEdit = isset($customer) && $customer)
<form method="POST" action="{{ $isEdit ? route('customers.update',$customer->id) : route('customers.store') }}" enctype="multipart/form-data" id="customerModalCreateForm">
    @csrf
    @if($isEdit) @method('PUT') @endif
    <input type="hidden" name="tenant_id" value="{{ $tenantId ?? session('tenant_id') }}" />
    <div class="p-3">
        <div class="row g-3">
            <div class="col-md-4">
                <label class="form-label">First Name<span class="text-danger">*</span></label>
                <input type="text" name="first_name" class="form-control" value="{{ $isEdit ? $customer->first_name : '' }}" required />
            </div>
            <div class="col-md-4">
                <label class="form-label">Last Name<span class="text-danger">*</span></label>
                <input type="text" name="last_name" class="form-control" value="{{ $isEdit ? $customer->last_name : '' }}" required />
            </div>
            <div class="col-md-4">
                <label class="form-label">Company Name</label>
                <input type="text" name="company_name" class="form-control" value="{{ $isEdit ? ($customer->company_name ?? ($customer->agency->company_name ?? '')) : '' }}" />
            </div>
            <div class="col-md-4">
                <label class="form-label">Email<span class="text-danger">*</span></label>
                <input type="email" name="email" class="form-control" value="{{ $isEdit ? $customer->email : '' }}" required />
            </div>
            <div class="col-md-4">
                <label class="form-label">Secondary Email</label>
                <input type="email" name="secondary_email" class="form-control" value="{{ $isEdit ? $customer->secondary_email : '' }}" />
            </div>
            <div class="col-md-4">
                <label class="form-label">Phone<span class="text-danger">*</span></label>
                <input type="text" name="phone" class="form-control phone_number_format" pattern="\(\d{3}\)\s\d{3}-\d{4}" placeholder="(123) 456-7890" value="{{ $isEdit ? $customer->phone : '' }}" required />
            </div>
            <div class="col-md-4">
                <label class="form-label">Mobile</label>
                <input type="text" name="mobile" class="form-control phone_number_format" pattern="\(\d{3}\)\s\d{3}-\d{4}" placeholder="(123) 456-7890" value="{{ $isEdit ? $customer->mobile : '' }}" />
            </div>
            <div class="col-md-4">
                <label class="form-label">Fax</label>
                <input type="text" name="fax" class="form-control" maxlength="10" pattern="\d{10}" value="{{ $isEdit ? $customer->fax : '' }}" />
            </div>
            <div class="col-md-8">
                <label class="form-label">Address</label>
                <input type="text" name="address_line1" id="address_auto_complete" class="form-control" value="{{ $isEdit ? ($customer->addresses->address_line1 ?? '') : '' }}" />
            </div>
            <div class="col-md-4">
                <label class="form-label">State</label>
                <input type="text" name="state" id="state_auto_complete" class="form-control" value="{{ $isEdit ? ($customer->addresses->state ?? '') : '' }}" readonly />
            </div>
            <div class="col-md-4">
                <label class="form-label">Zip</label>
                <input type="text" name="zip" id="zip_auto_complete" class="form-control" value="{{ $isEdit ? ($customer->addresses->zip ?? '') : '' }}" readonly />
            </div>
            {{-- Hidden Lat/Lng fields for address autocomplete --}}
            <input type="hidden" id="lat_hidden" name="latitude" value="{{ $isEdit ? ($customer->addresses->latitude ?? '') : '' }}" />
            <input type="hidden" id="lng_hidden" name="longitude" value="{{ $isEdit ? ($customer->addresses->longitude ?? '') : '' }}" />
            <div class="col-md-4">
                <label class="form-label">DOB</label>
                <input type="text" name="dob" class="form-control datepicker" value="{{ $isEdit && $customer->dob ? \Illuminate\Support\Carbon::parse($customer->dob)->format('m-d-Y') : '' }}" />
            </div>
            <div class="col-md-4">
                <label class="form-label">Notification Preference</label>
                @php($np = $isEdit ? $customer->notification_preference : '')
                <select name="notification_preference" class="form-select">
                    <option value="">Choose...</option>
                    <option value="email" {{ $np==='email'?'selected':'' }}>Email</option>
                    <option value="sms" {{ $np==='sms'?'selected':'' }}>SMS</option>
                    <option value="both" {{ $np==='both'?'selected':'' }}>Both</option>
                </select>
            </div>
            <div class="col-md-12">
                <label class="form-label">Notes</label>
                <textarea name="note" class="form-control" rows="2">{{ $isEdit ? $customer->note : '' }}</textarea>
            </div>
            <div class="col-md-4 d-flex align-items-center mt-2">
                <div class="form-check form-switch">
                    <input type="hidden" name="status" value="1" />
                </div>
            </div>
            <div class="col-12 form-actions mt-4">
                <button type="button" class="btn btn-dark" onclick="closeCreateClientModal()" data-bs-dismiss="modal" aria-label="Close">
                     Cancel
                </button>
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-save"></i> {{ $isEdit ? 'Update Client' : 'Save Client' }}
                </button>
            </div>
        </div>
    </div>
</form>

<script>
// Initialize Google Maps Address Autocomplete
function initializeAddressAutocomplete() {
    const addressInput = document.getElementById('address_auto_complete');
    const stateInput = document.getElementById('state_auto_complete');
    const zipInput = document.getElementById('zip_auto_complete');
    const latInput = document.getElementById('lat_hidden');
    const lngInput = document.getElementById('lng_hidden');
    
    if (!addressInput || typeof google === 'undefined' || !google.maps) {
        console.log('Google Maps API not available for address autocomplete');
        return;
    }
    
    const autocomplete = new google.maps.places.Autocomplete(addressInput, {
        types: ['address'],
        componentRestrictions: { country: 'US' }
    });
    
    autocomplete.addListener('place_changed', function() {
        const place = autocomplete.getPlace();
        
        if (!place.geometry) {
            console.log('No geometry data for selected place');
            return;
        }
        
        // Extract address components
        let state = '';
        let zipCode = '';
        
        if (place.address_components) {
            place.address_components.forEach(component => {
                const types = component.types;
                if (types.includes('administrative_area_level_1')) {
                    state = component.short_name;
                } else if (types.includes('postal_code')) {
                    zipCode = component.long_name;
                }
            });
        }
        
        // Update form fields
        if (stateInput) stateInput.value = state;
        if (zipInput) zipInput.value = zipCode;
        if (latInput) latInput.value = place.geometry.location.lat();
        if (lngInput) lngInput.value = place.geometry.location.lng();
        
        console.log('Address autocomplete completed:', {
            address: place.formatted_address,
            state: state,
            zip: zipCode,
            lat: place.geometry.location.lat(),
            lng: place.geometry.location.lng()
        });
    });
}

// Initialize autocomplete when the modal is shown
setTimeout(initializeAddressAutocomplete, 500);










</script>