@php
// Helper to safely format date for <input type="date">
$dobForInput = old('dob');
if (!$dobForInput && data_get($data, 'dob')) {
try {
$dobForInput = \Illuminate\Support\Carbon::parse(data_get($data, 'dob'))->format('m-d-Y');
} catch (\Throwable $e) {
$dobForInput = data_get($data, 'dob'); // fallback as-is
}
}

$avatarThumb = old('avatar')
? asset('img/200x200/no-profile.jpg')
: (data_get($data, 'avatar.thumb') ?: asset('img/200x200/no-profile.jpg'));

// Assign tenant_id from user_roles array if available
$tenantFromData = null;
$userRoles = data_get($data, 'user_roles', []);
if (!empty($userRoles) && isset($userRoles[0]['tenant_id'])) {
$tenantFromData = $userRoles[0]['tenant_id'];
}

// Get selected agency id
$selectedAgency = old('agency_id');
if (!$selectedAgency) {
    // Try to get from agent's agencies relationship (array or object)
    $agencies = data_get($data, 'agencies');
    if (is_array($agencies) && !empty($agencies)) {
        $selectedAgency = isset($agencies[0]['id']) ? $agencies[0]['id'] : null;
    } elseif (is_object($agencies) && isset($agencies->id)) {
        $selectedAgency = $agencies->id;
    }
}
@endphp

<div class="main_contentarea mt-2">
    <div class="container">
        <div class="customer_infobox">
            <div class="customer_statusarea align-items-start">
                <div class="customer_image">
                    <img src="{{ $avatarThumb }}" class="customer_imageup" />
                    <div class="customer_imageuploadfile">
                        <img src="{{ asset('images/camera.svg') }}" />
                        <input type="file" class="customuploadfile" name="avatar" accept="image/*">
                        @error('avatar')
                        <div class="text-danger small mt-1">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="text-danger small mt-1 d-none" id="avatar-error"></div>
                </div>

                <div class="customer_info">
                    <div class="row">

                        @if (!session('tenant_id'))
                        <div class="col-lg-4 col-md-4">
                            <div class="mb-3">
                                <label for="tenant_id" class="form-label">Tenant <span class="text-danger">*</span></label>
                                <select
                                    class="form-select js-select2 @error('tenant_id') is-invalid @enderror"
                                    name="tenant_id"
                                    id="tenant_id"
                                    required>
                                    <option value="">Choose...</option>
                                    @foreach ($tenant_list as $key => $value)
                                    <option value="{{ $key }}"
                                        {{ (string) old('tenant_id', $tenantFromData) === (string) $key ? 'selected' : '' }}>
                                        {{ $value }}
                                    </option>
                                    @endforeach
                                </select>
                                @error('tenant_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        @else
                        <input type="hidden" name="tenant_id" value="{{ old('tenant_id', session('tenant_id')) }}" />
                        @endif

                        <!-- Agency Dropdown -->
                        <div class="col-lg-4 col-md-4">
                            <div class="mb-3">
                                <label for="agency_id" class="form-label">Agency <span class="text-danger">*</span></label>
                                <select
                                    class="form-select js-select2 @error('agency_id') is-invalid @enderror"
                                    name="agency_id"
                                    id="agency_id"
                                    required>
                                    <option value="">Choose...</option>
                                    @foreach ($agency_list as $key => $value)
                                    <option value="{{ $key }}" {{ (string) old('agency_id', $selectedAgency) === (string) $key ? 'selected' : '' }}>{{ $value }}</option>
                                    @endforeach
                                </select>
                                @error('agency_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-lg-4 col-md-4">
                            <div class="mb-3">
                                <label for="first_name" class="form-label">First Name <span class="text-danger">*</span></label>
                                <input type="text"
                                    class="form-control @error('first_name') is-invalid @enderror"
                                    name="first_name"
                                    id="first_name"
                                    value="{{ old('first_name', data_get($data, 'first_name')) }}"
                                    required />
                                @error('first_name')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-lg-4 col-md-4">
                            <div class="mb-3">
                                <label for="last_name" class="form-label">Last Name <span class="text-danger">*</span></label>
                                <input type="text"
                                    class="form-control @error('last_name') is-invalid @enderror"
                                    name="last_name"
                                    id="last_name"
                                    value="{{ old('last_name', data_get($data, 'last_name')) }}"
                                    required />
                                @error('last_name')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-lg-4 col-md-4">
                            <div class="mb-3">
                                <label for="email" class="form-label">Email <span class="text-danger">*</span></label>
                                <input type="text"
                                    class="form-control @error('email') is-invalid @enderror"
                                    name="email"
                                    id="email"
                                    value="{{ old('email', data_get($data, 'email')) }}"
                                    required />
                                @error('email')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-lg-4 col-md-4">
                            <div class="mb-3">
                                <label for="secondary_email" class="form-label">Secondary Email</label>
                                <input type="text"
                                    class="form-control @error('secondary_email') is-invalid @enderror"
                                    name="secondary_email"
                                    id="secondary_email"
                                    value="{{ old('secondary_email', data_get($data, 'secondary_email')) }}" />
                                @error('secondary_email')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-lg-4 col-md-4">
                            <div class="mb-3">
                                <label for="phone" class="form-label">Phone <span class="text-danger">*</span></label>
                                <input type="text"
                                    class="form-control @error('phone') is-invalid @enderror phone_number_format"
                                    name="phone"
                                    id="phone"
                                    value="{{ old('phone', data_get($data, 'phone')) }}"
                                    required
                                    pattern="\(\d{3}\)\s\d{3}-\d{4}" placeholder="(123) 456-7890" />
                                @error('phone')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-lg-4 col-md-4">
                            <div class="mb-3">
                                <label for="mobile" class="form-label">Mobile Phone</label>
                                <input type="text"
                                    class="form-control @error('mobile') is-invalid @enderror phone_number_format"
                                    name="mobile"
                                    id="mobile"
                                    value="{{ old('mobile', data_get($data, 'mobile')) }}"
                                   pattern="\(\d{3}\)\s\d{3}-\d{4}" placeholder="(123) 456-7890" />
                                @error('mobile')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-lg-4 col-md-4">
                            <div class="mb-3">
                                <label for="fax" class="form-label">Fax</label>
                                <input type="text"
                                    class="form-control @error('fax') is-invalid @enderror"
                                    name="fax"
                                    id="fax"
                                    value="{{ old('fax', data_get($data, 'fax')) }}"
                                    maxlength="10"
                                    pattern="\d{10}" />
                                @error('fax')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-lg-4 col-md-4">
                            <div class="mb-3">
                                <label for="address_auto_complete" class="form-label">Address <span class="text-danger">*</span></label>
                                <input type="text"
                                    class="form-control @error('address_line1') is-invalid @enderror"
                                    name="address_line1"
                                    id="address_auto_complete"
                                    value="{{ old('address_line1', data_get($data, 'addresses.address_line1', data_get($data, 'address', data_get($data, 'address_line1')))) }}"
                                    required />
                                @error('address_line1')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-lg-4 col-md-4">
                            <div class="mb-3">
                                <label for="state_auto_complete" class="form-label">State</label>
                                <input type="text"
                                    class="form-control @error('state') is-invalid @enderror"
                                    name="state"
                                    id="state_auto_complete"
                                    value="{{ old('state', data_get($data, 'addresses.state', data_get($data, 'state'))) }}"
                                    readonly />
                                @error('state')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-lg-4 col-md-4">
                            <div class="mb-3">
                                <label for="zip_auto_complete" class="form-label">Zip</label>
                                <input type="text"
                                    class="form-control @error('zip') is-invalid @enderror"
                                    name="zip"
                                    id="zip_auto_complete"
                                    value="{{ old('zip', data_get($data, 'addresses.zip', data_get($data, 'zip'))) }}"
                                    readonly />
                                @error('zip')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        {{-- Hidden Lat/Lng --}}
                        <input type="hidden" id="lat_hidden" name="latitude" value="{{ old('latitude', data_get($data, 'addresses.latitude', data_get($data, 'latitude'))) }}" />
                        <input type="hidden" id="lng_hidden" name="longitude" value="{{ old('longitude', data_get($data, 'addresses.longitude', data_get($data, 'longitude'))) }}" />
                        @error('latitude') <div class="text-danger small">{{ $message }}</div> @enderror
                        @error('longitude') <div class="text-danger small">{{ $message }}</div> @enderror

                        <div class="col-lg-4 col-md-4">
                            <div class="mb-3">
                                <label for="dob" class="form-label">Date Of Birth</label>
                                <input type="text"
                                    class="form-control datepicker @error('dob') is-invalid @enderror"
                                    name="dob"
                                    id="dob"
                                    value="{{ $dobForInput }}" />
                                @error('dob')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-lg-4 col-md-4">
                            <div class="mb-3">
                                <label for="sponsor_id" class="form-label">Sponsor</label>
                                <select
                                    class="form-select js-select2 @error('sponsor_id') is-invalid @enderror"
                                    name="sponsor_id"
                                    id="sponsor_id">
                                    <option value="">Choose Sponsor...</option>
                                    @foreach ($inspectors_list as $key => $value)
                                    <option value="{{ $key }}" {{ (string) old('sponsor_id', $selected_sponsor) === (string) $key ? 'selected' : '' }}>{{ $value }}</option>
                                    @endforeach
                                </select>
                                @error('sponsor_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-lg-4 col-md-4">
                            <div class="mb-3">
                                <label for="notification_preference" class="form-label">Notification preference</label>
                                <select
                                    class="form-select @error('notification_preference') is-invalid @enderror"
                                    id="notification_preference"
                                    name="notification_preference">
                                    @php $np = old('notification_preference', data_get($data, 'notification_preference')); @endphp
                                    <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>
                                @error('notification_preference')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-lg-4 col-md-4">
                            <div class="mb-3">
                                <label for="notes" class="form-label">Notes</label>
                                <textarea
                                    class="form-control @error('note') is-invalid @enderror"
                                    id="notes"
                                    name="note"
                                    placeholder="Notes">{{ old('note', data_get($data, 'note')) }}</textarea>
                                @error('note')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-lg-4 col-md-4 mt-5" style="display:none;">
                            <div class="form-check form-switch">
                                <input type="hidden" name="status" value="0">
                                <input
                                    class="form-check-input @error('status') is-invalid @enderror"
                                    type="checkbox"
                                    role="switch"
                                    id="status"
                                    name="status"
                                    value="1"
                                    {{ old('status', data_get($data, 'status', 1)) ? 'checked' : '' }}>
                                <label class="form-check-label" for="status">Active</label>
                                @error('status')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                    </div>
                </div>

            </div>
        </div>
    </div>
</div>


<!-- BODY CONTENT SECTION END -->
@php($placeApiKey = \Config::get('settings.address_auto_populate_key'))
<!-- Include the common address autocomplete script -->
<script src="{{ asset('assets/js/address-autocomplete.js') }}"></script>
<!-- Load Google Maps API with Places library -->
<script async defer
    src="https://maps.googleapis.com/maps/api/js?key={{ $placeApiKey }}&libraries=places&loading=async&callback=initAddressAutocomplete">
</script>

<script>
    document.querySelector('.customuploadfile').addEventListener('change', function(event) {
        const file = event.target.files[0];
        const errorDiv = document.getElementById("avatar-error");
        errorDiv.classList.add("d-none");
        errorDiv.textContent = "";

        if (file) {
            // Check MIME type
            if (!file.type.startsWith("image/")) {
                errorDiv.textContent = "Please select a valid image file (jpg, png, gif, webp).";
                errorDiv.classList.remove("d-none");
                event.target.value = ""; // reset the input
                document.querySelector('.customer_imageup').setAttribute('src', "{{ asset('img/200x200/no-profile.jpg') }}");
                return;
            }

            // Preview the selected image
            const reader = new FileReader();
            reader.onload = function(e) {
                document.querySelector('.customer_imageup').setAttribute('src', e.target.result);
            };
            reader.readAsDataURL(file);
        }
    });

    //allow only numbers in phone, mobile, fax fields
    document.querySelectorAll('#phone, #mobile, #fax').forEach(input => {
        input.addEventListener('input', function() {
            this.value = this.value.replace(/\D/g, '').slice(0, 10);
        });
    });

    // Handle tenant change to load inspectors for sponsor dropdown (Super Admin only)
    @if (!session('tenant_id'))
    document.addEventListener('DOMContentLoaded', function() {
        console.log('Setting up tenant change handler for Super Admin');
        
        function setupHandler() {
            // Wait for jQuery to be available
            if (typeof window.$ === 'undefined') {
                console.log('jQuery not ready, retrying in 300ms...');
                setTimeout(setupHandler, 300);
                return;
            }
            
            const $ = window.$;
            console.log('jQuery available, setting up Select2 events');
            
            const tenantSelect = $('#tenant_id');
            if (tenantSelect.length === 0) {
                console.log('Tenant select not found, retrying...');
                setTimeout(setupHandler, 300);
                return;
            }
            
            console.log('Attaching event handler to tenant select');
            
            // Function to load inspectors for a given tenant
            function loadInspectorsForTenant(tenantId, sponsorSelect, preserveSelection) {
                console.log('Loading inspectors for tenant:', tenantId);
                
                // Store current selection if needed
                const currentSelection = preserveSelection ? sponsorSelect.val() : null;
                
                // Clear sponsor dropdown
                sponsorSelect.empty().append('<option value="">Choose Sponsor...</option>');
                
                if (!tenantId) {
                    console.log('No tenant selected');
                    return;
                }
                
                // Show loading state
                sponsorSelect.empty().append('<option value="">Loading...</option>');
                sponsorSelect.prop('disabled', true);
                
                // Use jQuery AJAX for better Laravel compatibility
                console.log('Fetching inspectors from:', '{{ route("agents.inspectors-by-tenant") }}');
                
                $.ajax({
                    url: '{{ route("agents.inspectors-by-tenant") }}',
                    method: 'GET',
                    data: { 
                        tenant_id: tenantId,
                        _token: $('meta[name="csrf-token"]').attr('content')
                    },
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Accept': 'application/json'
                    },
                    success: function(data) {
                        console.log('Inspectors response:', data);
                        sponsorSelect.prop('disabled', false);
                        sponsorSelect.empty().append('<option value="">Choose Sponsor...</option>');
                        
                        if (data.status && data.data && data.data.length > 0) {
                            console.log('Adding', data.data.length, 'inspectors');
                            data.data.forEach(function(inspector) {
                                sponsorSelect.append(
                                    $('<option></option>').val(inspector.id).text(inspector.name)
                                );
                            });
                            
                            // Restore selection if preserving
                            if (preserveSelection && currentSelection) {
                                sponsorSelect.val(currentSelection);
                                console.log('Restored sponsor selection:', currentSelection);
                            }
                        } else {
                            console.log('No inspectors found or empty response');
                            const message = data.message || 'No inspectors available';
                            sponsorSelect.append('<option value="" disabled>' + message + '</option>');
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error('AJAX Error Details:');
                        console.error('Status:', xhr.status);
                        console.error('Status Text:', xhr.statusText);
                        console.error('Response Text:', xhr.responseText);
                        console.error('Error:', error);
                        
                        sponsorSelect.prop('disabled', false);
                        sponsorSelect.empty().append('<option value="">Error loading inspectors</option>');
                        
                        // If it's a redirect, log the redirect URL
                        if (xhr.status === 302 && xhr.getResponseHeader('Location')) {
                            console.error('Redirected to:', xhr.getResponseHeader('Location'));
                        }
                    }
                });
            }
            
            // Attach event handler for Select2 changes (use only select2:select to avoid duplicate calls)
            tenantSelect.on('select2:select', function(e) {
                console.log('Tenant changed - event type:', e.type);
                const tenantId = $(this).val();
                console.log('Selected tenant ID:', tenantId);
                
                const sponsorSelect = $('#sponsor_id');
                loadInspectorsForTenant(tenantId, sponsorSelect, false);
            }); // Close tenantSelect.on() function
            
            // For edit mode or when tenant is already selected, load inspectors immediately
            const currentTenantId = tenantSelect.val();
            if (currentTenantId) {
                console.log('Found pre-selected tenant, loading inspectors:', currentTenantId);
                const sponsorSelect = $('#sponsor_id');
                loadInspectorsForTenant(currentTenantId, sponsorSelect, true); // Preserve existing selection
            }
        } // Close setupHandler function
        
        // Start setup with initial delay
        setTimeout(setupHandler, 1000);
    }); // Close addEventListener function
    @endif
</script>