@php
    // Extract agency data for easier access in the form
    $agency = isset($data) && !empty($data) ? $data : null;
    
    // Helper function to get property from agency object
    function getAgencyValue($agency, $field, $default = '') {
        if (is_object($agency)) {
            return $agency->{$field} ?? $default;
        } elseif (is_array($agency)) {
            return $agency[$field] ?? $default;
        }
        return $default;
    }
    
    // Get the tenant_id from data if available
    $tenantId = old('tenant_id', getAgencyValue($agency, 'tenant_id'));
    
    // Add debug information at the top of the form (will be hidden in production)
    $debugInfo = json_encode($agency);
@endphp

@if(config('app.debug'))
    <div class="alert alert-info d-none">
        <strong>Debug Data:</strong>
        <pre>{{ $debugInfo }}</pre>
    </div>
@endif

<div class="main_contentarea mt-2">
    <div class="container">
        <div class="customer_infobox">
            <div class="customer_statusarea d-flex align-items-start">
                <!-- Left side - Avatar upload -->
                <div class="customer_image me-4">
                    @php
                        // Handle avatar URL for both create and edit scenarios
                        $defaultAvatarUrl = asset('img/200x200/no-profile.jpg');
                        
                        if (old('avatar')) {
                            $avatarUrl = $defaultAvatarUrl; // For new uploads in validation failed form
                        } elseif ($agency && isset($agency['avatar']) && isset($agency['avatar']['thumb']) && !empty($agency['avatar']['thumb'])) {
                            $avatarUrl = $agency['avatar']['thumb']; // Existing avatar for edit
                        } else {
                            $avatarUrl = $defaultAvatarUrl; // Default for new agency or no avatar
                        }
                    @endphp
                    <div class="customer_imageup">
                        <img id="avatar-preview" src="{{ $avatarUrl }}" alt="Agency Logo" class="img-fluid rounded-circle" style="width: 90px; height: 90px; object-fit: cover;">
                    </div>
                    <div class="customer_imageuploadfile">
                        <img src="{{ asset('images/camera.svg') }}" alt="Upload" width="16">
                        <input type="file" name="avatar" id="avatar-upload" class="customuploadfile" accept="image/*">
                    </div>
                </div>
                
                <!-- Right side - Form fields -->
                <div class="customer_info" style="margin-left: 0;">
                    <div class="row">
                        @if(session('tenant_id'))
                            <input type="hidden" name="tenant_id" value="{{ session('tenant_id') }}">
                        @else
                            <div class="col-lg-6 col-md-6 mb-3">
                                <label class="form-label fw-500">Tenant <span class="required">*</span></label>
                                <!-- Removed native required to control placement of validation message manually -->
                                <select class="form-select js-select2 @error('tenant_id') is-invalid @enderror" name="tenant_id" id="tenant_id">
                                    <option value="">Select Tenant</option>
                                    @foreach($tenant_list as $id => $name)
                                        <option value="{{ $id }}" {{ old('tenant_id', $tenantId) == $id ? 'selected' : '' }}>{{ $name }}</option>
                                    @endforeach
                                </select>
                                @error('tenant_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <div class="invalid-feedback" id="tenant-required-error" style="display:none;">This value is required.</div>
                            </div>
                        @endif

                        <div class="col-lg-6 col-md-6 mb-3">
                            <label class="form-label fw-500">Agency Name <span class="required">*</span></label>
                            <input type="text" class="form-control @error('name') is-invalid @enderror" name="name" 
                                value="{{ old('name', getAgencyValue($agency, 'name')) }}" required>
                            @error('name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-lg-6 col-md-6 mb-3">
                            <label class="form-label fw-500">Company Name</label>
                            <input type="text" class="form-control @error('company_name') is-invalid @enderror" name="company_name" 
                                value="{{ old('company_name', getAgencyValue($agency, 'company_name')) }}">
                            @error('company_name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-lg-6 col-md-6 mb-3">
                            <label class="form-label fw-500">Website</label>
                            <input type="url" class="form-control @error('website') is-invalid @enderror" name="website" 
                                value="{{ old('website', getAgencyValue($agency, 'website')) }}"
                                placeholder="https://www.example.com">
                            <small class="text-muted">Please enter a full URL including https:// or http:// (e.g., https://www.example.com)</small>
                            @error('website')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <h4 class="customer_detailtitle mt-3">Contact Information</h4>

                    <div class="row">
                        <div class="col-lg-6 col-md-6 mb-3">
                            <label class="form-label fw-500">Office Email <span class="required">*</span></label>
                            <input type="email" class="form-control @error('office_email') is-invalid @enderror" name="office_email" 
                                value="{{ old('office_email', getAgencyValue($agency, 'office_email')) }}" required>
                            @error('office_email')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-lg-6 col-md-6 mb-3">
                            <label class="form-label fw-500">Secondary Email</label>
                            <input type="email" class="form-control @error('secondary_email') is-invalid @enderror" name="secondary_email" 
                                value="{{ old('secondary_email', getAgencyValue($agency, 'secondary_email')) }}">
                            @error('secondary_email')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-lg-6 col-md-6 mb-3">
                            <label class="form-label fw-500">Office Phone <span class="required">*</span></label>
                            <input type="text" class="form-control phone_number_format @error('office_phone') is-invalid @enderror" name="office_phone" 
                                value="{{ old('office_phone', getAgencyValue($agency, 'office_phone')) }}" 
                                pattern="\(\d{3}\)\s\d{3}-\d{4}" placeholder="(123) 456-7890" required>
                            @error('office_phone')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

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

                        <div class="col-lg-6 col-md-6 mb-3">
                            <label class="form-label fw-500">Fax</label>
                            <input type="text" class="form-control phone-input @error('fax') is-invalid @enderror" name="fax" 
                                value="{{ old('fax', getAgencyValue($agency, 'fax')) }}" 
                                pattern="^[0-9]{10}$" 
                                title="Please enter exactly 10 digits with no spaces or special characters"
                                maxlength="10">
                            @error('fax')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <h4 class="customer_detailtitle mt-3">Address Information</h4>

                    <div class="row">
                        <div class="col-lg-12 mb-3">
                            <label class="form-label fw-500">Address</label>
                            <input type="text" class="form-control @error('address') is-invalid @enderror" 
                                id="address_auto_complete"
                                name="address" 
                                value="{{ old('address', getAgencyValue($agency, 'address')) }}">
                            @error('address')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-lg-6 col-md-6 mb-3">
                            <label class="form-label fw-500">City</label>
                            <input type="text" class="form-control @error('city') is-invalid @enderror" 
                                id="city_auto_complete"
                                name="city" 
                                value="{{ old('city', getAgencyValue($agency, 'city')) }}"
                                readonly>
                            @error('city')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-lg-6 col-md-6 mb-3">
                            <label class="form-label fw-500">State</label>
                            <input type="text" class="form-control @error('state') is-invalid @enderror" 
                                id="state_auto_complete"
                                name="state" 
                                value="{{ old('state', getAgencyValue($agency, 'state')) }}"
                                readonly>
                            @error('state')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-lg-6 col-md-6 mb-3">
                            <label class="form-label fw-500">Zip</label>
                            <input type="text" class="form-control @error('zip') is-invalid @enderror" 
                                id="zip_auto_complete"
                                name="zip" 
                                value="{{ old('zip', getAgencyValue($agency, 'zip')) }}"
                                readonly>
                            @error('zip')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <input type="hidden" id="country_auto_complete" name="country" value="{{ old('country', getAgencyValue($agency, 'country')) }}">
                            <input type="hidden" id="lat_hidden" name="latitude" value="{{ old('latitude', getAgencyValue($agency, 'latitude')) }}">
                            <input type="hidden" id="lng_hidden" name="longitude" value="{{ old('longitude', getAgencyValue($agency, 'longitude')) }}">
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-lg-12 mb-3">
                            <label class="form-label fw-500">Notes</label>
                            <textarea class="form-control @error('notes') is-invalid @enderror" name="notes" rows="3">{{ old('notes', getAgencyValue($agency, 'notes')) }}</textarea>
                            @error('notes')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="row" style="display:none;">
                        <div class="col-lg-6 col-md-6 mb-3">
                            <div class="form-check form-switch">
                                <input type="hidden" name="is_active" value="0">
                                <input class="form-check-input" type="checkbox" id="statusSwitch" name="is_active" value="1" 
                                    {{ old('is_active', getAgencyValue($agency, 'is_active', 1)) ? 'checked' : '' }}>
                                <label class="form-check-label" for="statusSwitch">Agency Status</label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@php($placeApiKey = \Config::get('settings.address_auto_populate_key'))
<script src="{{ asset('assets/js/address-autocomplete.js') }}"></script>
<script src="https://maps.googleapis.com/maps/api/js?key={{ $placeApiKey }}&libraries=places&loading=async&callback=initAddressAutocomplete"></script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Image preview functionality
        const avatarUpload = document.getElementById('avatar-upload');
        const avatarPreview = document.getElementById('avatar-preview');
        
        if (avatarUpload && avatarPreview) {
            avatarUpload.addEventListener('change', function() {
                if (this.files && this.files[0]) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        avatarPreview.src = e.target.result;
                    }
                    reader.readAsDataURL(this.files[0]);
                }
            });
        }
        
        // Phone validation functionality
        const phoneInputs = document.querySelectorAll('.phone-input');
        const phonePattern = /^[0-9]{10}$/;
        
        phoneInputs.forEach(function(input) {
            // Force numeric input only
            input.addEventListener('input', function(e) {
                // Remove any non-digit characters
                this.value = this.value.replace(/\D/g, '');
                
                // Limit to 10 characters
                if (this.value.length > 10) {
                    this.value = this.value.slice(0, 10);
                }
                
                validatePhoneNumber(this);
            });
            
            input.addEventListener('blur', function() {
                validatePhoneNumber(this);
            });
        });
        
        function validatePhoneNumber(input) {
            // If it's empty and not required, it's valid
            if (input.value === '' && input.name !== 'office_phone') {
                input.classList.remove('is-invalid');
                input.parentElement.querySelector('.phone-error').style.display = 'none';
                return;
            }
            
            // Check if it's exactly 10 digits
            const isValid = phonePattern.test(input.value);
            
            if (!isValid) {
                input.classList.add('is-invalid');
                input.parentElement.querySelector('.phone-error').style.display = 'block';
            } else {
                input.classList.remove('is-invalid');
                input.parentElement.querySelector('.phone-error').style.display = 'none';
            }
        }
        
        // Email validation functionality
        const emailInputs = document.querySelectorAll('input[type="email"]');
        const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
        
        emailInputs.forEach(function(input) {
            // Validate on input change
            input.addEventListener('input', function() {
                validateEmail(this);
            });
            
            // Validate on blur
            input.addEventListener('blur', function() {
                validateEmail(this);
            });
        });
        
        function validateEmail(input) {
            // Skip validation if field is empty and not required (secondary email)
            if (input.value === '' && input.name !== 'office_email') {
                input.classList.remove('is-invalid');
                // Remove any existing error message
                let errorMsg = input.parentElement.querySelector('.email-error');
                if (errorMsg) {
                    errorMsg.style.display = 'none';
                }
                return;
            }
            
            // Check if email format is valid
            const isValid = emailPattern.test(input.value);
            
            if (!isValid) {
                input.classList.add('is-invalid');
                // Create error message if it doesn't exist
                let errorMsg = input.parentElement.querySelector('.email-error');
                if (!errorMsg) {
                    errorMsg = document.createElement('div');
                    errorMsg.className = 'invalid-feedback email-error';
                    errorMsg.textContent = 'Please enter a valid email address';
                    input.parentElement.appendChild(errorMsg);
                } else {
                    errorMsg.style.display = 'block';
                }
            } else {
                input.classList.remove('is-invalid');
                // Hide error message when email is valid
                let errorMsg = input.parentElement.querySelector('.email-error');
                if (errorMsg) {
                    errorMsg.style.display = 'none';
                }
            }
        }
        
        // Form submission validation
        const form = document.querySelector('form');
        if (form) {
            // Tenant (Select2) validation setup
            const tenantSelect = document.getElementById('tenant_id');
            const tenantError = document.getElementById('tenant-required-error');
            const validateTenant = () => {
                if (!tenantSelect) return true;
                const val = tenantSelect.value.trim();
                if (!val) {
                    tenantError && (tenantError.style.display = 'block');
                    tenantSelect.classList.add('is-invalid');
                    // If Select2 applied, add error style to its rendered selection
                    if (window.jQuery) {
                        const $s2 = window.jQuery(tenantSelect).next('.select2');
                        $s2.find('.select2-selection').addClass('is-invalid');
                    }
                    return false;
                }
                tenantError && (tenantError.style.display = 'none');
                tenantSelect.classList.remove('is-invalid');
                if (window.jQuery) {
                    const $s2 = window.jQuery(tenantSelect).next('.select2');
                    $s2.find('.select2-selection').removeClass('is-invalid');
                }
                return true;
            };

            if (tenantSelect) {
                tenantSelect.addEventListener('change', validateTenant);
            }

            form.addEventListener('submit', function(e) {
                let formIsValid = true;
                // Validate tenant first
                if (!validateTenant()) {
                    formIsValid = false;
                }
                
                // Validate phone fields before submission
                phoneInputs.forEach(function(input) {
                    // Office phone is required and must be 10 digits
                    if (input.name === 'office_phone' && !phonePattern.test(input.value)) {
                        formIsValid = false;
                        input.classList.add('is-invalid');
                        input.parentElement.querySelector('.phone-error').style.display = 'block';
                    }
                    // Mobile phone and fax are optional but if provided must be 10 digits
                    else if (input.name !== 'office_phone' && input.value !== '' && !phonePattern.test(input.value)) {
                        formIsValid = false;
                        input.classList.add('is-invalid');
                        input.parentElement.querySelector('.phone-error').style.display = 'block';
                    }
                });
                
                // Validate email fields before submission
                emailInputs.forEach(function(input) {
                    // Office email is required and must be valid
                    if (input.name === 'office_email' && (input.value === '' || !emailPattern.test(input.value))) {
                        formIsValid = false;
                        validateEmail(input);
                    }
                    // Secondary email is optional but if provided must be valid
                    else if (input.name !== 'office_email' && input.value !== '' && !emailPattern.test(input.value)) {
                        formIsValid = false;
                        validateEmail(input);
                    }
                });
                
                if (!formIsValid) {
                    e.preventDefault();
                    window.scrollTo(0, 0);
                }
            });
        }
    });
</script>