@php
    $isEdit = isset($service);
    $tenant_id = session('tenant_id');
@endphp

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                @if(session('error'))
                    <div class="alert alert-danger">
                        {{ session('error') }}
                    </div>
                @endif

                <form class="form-horizontal custom-validation" action="{{ $isEdit ? route('services.update', $service->id) : route('services.store') }}" method="POST" id="service-form">
                    @csrf
                    @if($isEdit)
                        @method('PATCH')
                    @endif

                    @if($tenant_id)
                        <input type="hidden" name="tenant_id" value="{{ $tenant_id }}">
                    @else
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="tenant_id" class="form-label">Tenant <span class="text-danger">*</span></label>
                                    <select class="form-select select2 @error('tenant_id') is-invalid @enderror" id="tenant_id" name="tenant_id" required>
                                        <option value="">Select Tenant</option>
                                        @foreach($tenant_list as $id => $name)
                                            <option value="{{ $id }}" {{ old('tenant_id', $isEdit ? $service->tenant_id : '') == $id ? 'selected' : '' }}>
                                                {{ $name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('tenant_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <div class="form-text">Select the tenant for which this evaluation type will be available</div>
                                </div>
                            </div>
                        </div>
                    @endif

                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="service_name" class="form-label">Evaluation Type Name <span class="text-danger">*</span></label>
                                <input type="text" class="form-control @error('service_name') is-invalid @enderror" id="service_name" 
                                    name="service_name" value="{{ old('service_name', $isEdit ? $service->service_name : '') }}" required>
                                @error('service_name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="short_name_of_service" class="form-label">Short Name <span class="text-danger">*</span></label>
                                <input type="text" class="form-control @error('short_name_of_service') is-invalid @enderror" 
                                    id="short_name_of_service" name="short_name_of_service" 
                                    value="{{ old('short_name_of_service', $isEdit ? $service->short_name_of_service : '') }}" required>
                                @error('short_name_of_service')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>                       

                        {{-- Hidden Fields - Service Type --}}
                        <div class="col-md-6" style="display: none;">
                            <div class="mb-3">
                                <label for="service_type" class="form-label">Service Type </label>
                                <select class="form-select select2 @error('service_type') is-invalid @enderror" id="service_type" name="service_type">
                                    <option value="">Select Option</option>
                                    @foreach(['Residential', 'Sewer', 'Radon', 'Other'] as $type)
                                        <option value="{{ $type }}" {{ old('service_type', $isEdit ? $service->service_type : '') == $type ? 'selected' : '' }}>
                                            {{ $type }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('service_type')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        {{-- Hidden Fields - Fee Type --}}
                        <div class="col-md-6" style="display: none;">
                            <div class="mb-3">
                                <label for="fee_type" class="form-label">Fee Type <span class="text-danger">*</span></label>
                                <select class="form-select select2 @error('fee_type') is-invalid @enderror" id="fee_type" name="fee_type">
                                    <option value="">Select Fee Type</option>
                                    @foreach(['Fixed', 'Condo', 'Multihouse', 'Variable', 'Quotation'] as $type)
                                        <option value="{{ $type }}" {{ old('fee_type', $isEdit ? $service->fee_type : 'Fixed') == $type ? 'selected' : '' }}>
                                            {{ $type }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('fee_type')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <div class="form-text">Choose how fees are calculated: Fixed (set amount), Condo (bedroom/bathroom based), Multihouse (multiple units), Variable (area based), or Quotation (custom quote)</div>
                            </div>
                        </div>

                        {{-- Hidden Fields - Variable Fee Type Fields --}}
                        <div class="col-md-4 fee-type-variable fee-type-condo fee-type-multihouse" style="display: none !important;">
                            <div class="mb-3">
                                <label for="base_fee" class="form-label">Base Fee ($)</label>
                                <input type="number" step="0.01" min="0" class="form-control @error('base_fee') is-invalid @enderror" 
                                    id="base_fee" name="base_fee" value="{{ old('base_fee', $isEdit ? $service->base_fee : '0.00') }}">
                                @error('base_fee')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-4 fee-type-variable" style="display: none !important;">
                            <div class="mb-3">
                                <label for="base_sqft" class="form-label">Base Sq.ft</label>
                                <input type="number" step="0.01" min="0" class="form-control @error('base_sqft') is-invalid @enderror" 
                                    id="base_sqft" name="base_sqft" value="{{ old('base_sqft', $isEdit ? $service->base_sqft : '0.00') }}">
                                @error('base_sqft')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-4 fee-type-variable" style="display: none !important;">
                            <div class="mb-3">
                                <label for="fee_per_sqft" class="form-label">Fee per Sq.ft ($)</label>
                                <input type="number" step="0.01" min="0" class="form-control @error('fee_per_sqft') is-invalid @enderror" 
                                    id="fee_per_sqft" name="fee_per_sqft" value="{{ old('fee_per_sqft', $isEdit ? $service->fee_per_sqft : '0.00') }}">
                                @error('fee_per_sqft')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        {{-- Hidden Fields - Fixed Fee Type Field --}}
                        <div class="col-md-4 fee-type-fixed" style="display: none !important;">
                            <div class="mb-3">
                                <label for="fee" class="form-label">Fee ($)</label>
                                <input type="number" step="0.01" min="0" class="form-control @error('fee') is-invalid @enderror" 
                                    id="fee" name="fee" value="{{ old('fee', $isEdit ? $service->fee : '0.00') }}">
                                @error('fee')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        {{-- Duration --}}
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="duration" class="form-label">Duration (minutes) <span class="text-danger">*</span></label>
                                <input type="number" min="1" step="1" class="form-control @error('duration') is-invalid @enderror" 
                                    id="duration" name="duration" value="{{ old('duration', $isEdit ? $service->duration : '60') }}" required>
                                @error('duration')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <div class="form-text">Estimated time to complete this evaluation type</div>
                            </div>
                        </div>

                        <!-- <div class="col-md-4">
                            <div class="mb-3">
                                <label for="sort_order" class="form-label">Sort Order <span class="text-danger">*</span></label>
                                <input type="number" class="form-control @error('sort_order') is-invalid @enderror" 
                                    id="sort_order" name="sort_order" value="{{ old('sort_order', $isEdit ? $service->sort_order : '0') }}" required>
                                @error('sort_order')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div> -->

                        {{-- Hidden Fields - Default Inspector --}}
                        <div class="col-md-4" style="display: none;">
                            <div class="mb-3">
                                <label for="default_inspector_id" class="form-label">Default Inspector</label>
                                <select class="form-select select2 @error('default_inspector_id') is-invalid @enderror" id="default_inspector_id" name="default_inspector_id">
                                    <option value="">Select Inspector</option>
                                    @foreach($inspectors as $id => $name)
                                        <option value="{{ $id }}" 
                                            {{ old('default_inspector_id', $isEdit ? $service->default_inspector_id : '') == $id ? 'selected' : '' }}>
                                            {{ $name }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('default_inspector_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        {{-- Hidden Fields - Default Template --}}
                        <div class="col-md-4" style="display: none;">
                            <div class="mb-3">
                                <label for="default_template_id" class="form-label">Default Template</label>
                                <select class="form-select select2 @error('default_template_id') is-invalid @enderror" id="default_template_id" name="default_template_id">
                                    <option value="">Select Template</option>
                                    @foreach($templates ?? [] as $id => $name)
                                        <option value="{{ $id }}" 
                                            {{ old('default_template_id', $isEdit ? $service->default_template_id : '') == $id ? 'selected' : '' }}>
                                            {{ $name }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('default_template_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        {{-- Hidden Fields - Language --}}
                        <div class="col-md-4" style="display: none;">
                            <div class="mb-3">
                                <label for="master_language_id" class="form-label">Language</label>
                                <select class="form-select select2 @error('master_language_id') is-invalid @enderror" id="master_language_id" name="master_language_id">
                                    <option value="">Select Language</option>
                                    @foreach($languages ?? [] as $id => $name)
                                        <option value="{{ $id }}" 
                                            {{ old('master_language_id', $isEdit ? $service->master_language_id : '') == $id ? 'selected' : '' }}>
                                            {{ $name }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('master_language_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-12">
                            <div class="mb-3">
                                <label for="description" class="form-label">Description <span class="text-danger">*</span></label>
                                <textarea class="form-control @error('description') is-invalid @enderror" id="description" 
                                    name="description" rows="3" required>{{ old('description', $isEdit ? $service->description : '') }}</textarea>
                                @error('description')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        {{-- Forms (Sections) - Multiple Select --}}
                        <div class="col-md-12">
                            <div class="mb-3">
                                <label for="section_ids" class="form-label">Forms <span class="text-danger">*</span></label>
                                <select class="form-select select2 @error('section_ids') is-invalid @enderror" 
                                    id="section_ids" name="section_ids[]" multiple required style="min-height: 150px;">
                                    @foreach($sections ?? [] as $id => $title)
                                        <option value="{{ $id }}" 
                                            {{ in_array($id, old('section_ids', $selected_sections ?? [])) ? 'selected' : '' }}>
                                            {{ $title }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('section_ids')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <div class="form-text">Select one or more forms/sections to associate with this evaluation type</div>
                            </div>
                        </div>
                        <style>
                            #section_ids + .select2-container .select2-selection--multiple {
                                min-height: 120px !important;
                                max-height: 200px;
                                overflow-y: auto;
                            }
                        </style>

                        {{-- Hidden Fields - Is Main Service --}}
                        <div class="col-md-6" style="display: none;">
                            <div class="mb-3">
                                <div class="form-check">
                                    <input type="checkbox" class="form-check-input @error('is_main_service') is-invalid @enderror" 
                                        id="is_main_service" name="is_main_service" value="1" 
                                        {{ old('is_main_service', $isEdit ? $service->is_main_service : false) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="is_main_service">Is this a main service?</label>
                                </div>
                                @error('is_main_service')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        {{-- Hidden Fields - Hide in Scheduler --}}
                        <div class="col-md-6" style="display: none;">
                            <div class="mb-3">
                                <div class="form-check">
                                    <input type="checkbox" class="form-check-input @error('hide_in_scheduler') is-invalid @enderror" 
                                        id="hide_in_scheduler" name="hide_in_scheduler" value="1" 
                                        {{ old('hide_in_scheduler', $isEdit ? $service->hide_in_scheduler : false) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="hide_in_scheduler">
                                        Do you want to hide this service from online scheduler?
                                    </label>
                                </div>
                                @error('hide_in_scheduler')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        {{-- Hidden Fields - Fee Type Specific Options --}}
                        <!-- For Fixed and Quotation Types -->
                        <div class="col-md-6 fee-type-quotation" style="display: none !important;">
                            <div class="mb-3">
                                <div class="form-check">
                                    <input type="checkbox" class="form-check-input @error('include_fees_per_service_area') is-invalid @enderror" 
                                        id="include_fees_per_service_area" name="include_fees_per_service_area" value="1" 
                                        {{ old('include_fees_per_service_area', $isEdit ? $service->include_fees_per_service_area : false) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="include_fees_per_service_area">Do you want to include fees per service area?</label>
                                </div>
                                @error('include_fees_per_service_area')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <!-- For Fixed Type Only -->
                        <div class="col-md-6 fee-type-fixed" style="display: none !important;">
                            <div class="mb-3">
                                <div class="form-check">
                                    <input type="checkbox" class="form-check-input @error('add_quantity') is-invalid @enderror" 
                                        id="add_quantity" name="add_quantity" value="1" 
                                        {{ old('add_quantity', $isEdit ? $service->add_quantity : false) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="add_quantity">Do you need to add quantity to this service (Like more than one mold sample)?</label>
                                </div>
                                @error('add_quantity')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    {{-- Service Fees Sections Removed - Not used in simplified form --}}

                    <div class="text-end mt-3">
                        <a href="{{ route('services.index') }}" class="btn btn-dark waves-effect me-2">Cancel</a>
                        <button type="submit" class="btn btn-primary">{{ $isEdit ? 'Update' : 'Save' }} Evaluation Type</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@push('page_script')
<script>
    $(document).ready(function() {
        // DEBUGGING: Check initial values on page load
        console.log('=== DOCUMENT READY - INITIAL STATE (Simplified Form) ===');
        console.log('Is Edit Mode:', {{ $isEdit ? 'true' : 'false' }});
        @if($isEdit && isset($service))
        console.log('Service ID:', {{ $service->id }});
        @endif

        // DEFINE FUNCTION FIRST before calling it!
        // NOTE: Most fee-related fields are now hidden in simplified form
        function handleFeeTypeVisibility(feeType) {
            console.log('=== HANDLING FEE TYPE VISIBILITY (Simplified Form) ===');
            console.log('Selected fee type:', feeType);
            
            // All fee-related fields are now hidden, so just reset required attributes
            // Don't show any fee-type specific fields since they're all hidden
            
            // Reset all required fields for hidden elements
            $('.fee-type-variable input, .fee-type-fixed input, .fee-type-condo input, .fee-type-multihouse input').prop('required', false);
            $('#base_fee, #base_sqft, #fee_per_sqft, #fee, #duration').prop('required', false);
            $('#default_template_id, #master_language_id').prop('required', false);
            
            // Remove required from all service fee inputs
            $('#service-fees-section input, #condo-service-fees-section input').prop('required', false);
            
            console.log('✅ Simplified form - all fee fields remain hidden');
        }

        // NOW trigger initial fee type visibility AFTER function is defined
        // Simplified form - just ensure defaults are set
        setTimeout(function() {
            let currentFeeType = $('#fee_type').val();
            
            // Default to 'Fixed' if no fee type is set
            if (!currentFeeType || currentFeeType === '') {
                currentFeeType = 'Fixed';
                $('#fee_type').val(currentFeeType);
            }
            
            handleFeeTypeVisibility(currentFeeType);
        }, 200);

        // Initialize select2 if available
        if($.fn.select2) {
            // Initialize Select2 but preserve existing values
            $('#tenant_id, #service_type, #fee_type, #default_inspector_id, #default_template_id, #master_language_id').each(function() {
                let currentValue = $(this).val();
                console.log('Select2 init - Field:', $(this).attr('id'), 'Current value:', currentValue);
                
                $(this).select2({
                    placeholder: "Select Option",
                    allowClear: true
                });
                
                // Restore the value after Select2 initialization
                if (currentValue) {
                    $(this).val(currentValue).trigger('change');
                    console.log('Restored value for', $(this).attr('id'), ':', currentValue);
                    
                    // Special handling for fee_type to trigger visibility after Select2 is ready
                    if ($(this).attr('id') === 'fee_type') {
                        setTimeout(() => {
                            console.log('🔄 Re-triggering fee type visibility after Select2 restoration:', currentValue);
                            handleFeeTypeVisibility(currentValue);
                        }, 50);
                    }
                }
            });

            // Add event handlers for inspector and template dropdowns
            $('#default_inspector_id, #default_template_id').on('select2:select select2:unselect', function(e) {
                // If it's an unselect event, manually clear the value
                if (e.type === 'select2:unselect') {
                    $(this).val('').trigger('change');
                }
            });
        }

        // Initialize tenant change handler
        $('#tenant_id').on('select2:select select2:unselect change', function(e) {
            var selectedTenantId = $(this).val();
            console.log('Tenant changed event:', e.type);
            console.log('Selected tenant ID:', selectedTenantId);
            
            if(selectedTenantId) {
                loadInspectors(selectedTenantId);
                loadTemplates(selectedTenantId);
                loadSections(selectedTenantId);
            } else {
                $('#default_inspector_id').html('<option value="">Select Inspector</option>').trigger('change');
                $('#default_template_id').html('<option value="">Select Template</option>').trigger('change');
                $('#section_ids').html('').trigger('change');
            }
        });

        // Inspector loading function
        function loadInspectors(tenantId) {
            if (!tenantId) {
                $('#default_inspector_id').html('<option value="">Select Inspector</option>').trigger('change');
                return;
            }

            console.log('Loading inspectors for tenant:', tenantId);

            $.ajax({
                url: '{{ route("services.get-inspectors") }}',
                type: 'GET',
                data: { tenant_id: tenantId },
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function() {
                    console.log('Sending request to get inspectors for tenant:', tenantId);
                    $('#default_inspector_id')
                        .prop('disabled', true)
                        .html('<option value="">Loading inspectors...</option>')
                        .trigger('change');
                },
                success: function(response) {
                    console.log('Inspectors response:', response);
                    let options = '<option value="">Select Inspector</option>';
                    if (response && typeof response === 'object') {
                        $.each(response, function(id, name) {
                            let selected = '{{ old("default_inspector_id", isset($service) ? $service->default_inspector_id : "") }}' == id ? 'selected' : '';
                            options += `<option value="${id}" ${selected}>${name}</option>`;
                        });
                        $('#default_inspector_id')
                            .prop('disabled', false)
                            .html(options)
                            .trigger('change');
                    } else {
                        console.error('Invalid response format:', response);
                        $('#default_inspector_id')
                            .prop('disabled', false)
                            .html('<option value="">Error: Invalid response</option>')
                            .trigger('change');
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Error loading inspectors:', error);
                    console.error('Status:', status);
                    console.error('Response:', xhr.responseText);
                    $('#default_inspector_id')
                        .prop('disabled', false)
                        .html('<option value="">Error loading inspectors</option>')
                        .trigger('change');
                    if(xhr.responseJSON && xhr.responseJSON.error) {
                        console.error('Server error:', xhr.responseJSON.error);
                    }
                }
            });
        }

        // Template loading function
        function loadTemplates(tenantId) {
            if (!tenantId) {
                $('#default_template_id').html('<option value="">Select Template</option>').trigger('change');
                return;
            }

            console.log('Loading templates for tenant:', tenantId);

            $.ajax({
                url: '{{ route("services.get-templates") }}',
                type: 'GET',
                data: { tenant_id: tenantId },
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function() {
                    console.log('Sending request to get templates for tenant:', tenantId);
                    $('#default_template_id')
                        .prop('disabled', true)
                        .html('<option value="">Loading templates...</option>')
                        .trigger('change');
                },
                success: function(response) {
                    console.log('Templates response:', response);
                    let options = '<option value="">Select Template</option>';
                    if (response && typeof response === 'object') {
                        $.each(response, function(id, name) {
                            let selected = '{{ old("default_template_id", isset($service) ? $service->default_template_id : "") }}' == id ? 'selected' : '';
                            options += `<option value="${id}" ${selected}>${name}</option>`;
                        });
                        $('#default_template_id')
                            .prop('disabled', false)
                            .html(options)
                            .trigger('change');
                    } else {
                        console.error('Invalid response format:', response);
                        $('#default_template_id')
                            .prop('disabled', false)
                            .html('<option value="">Error: Invalid response</option>')
                            .trigger('change');
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Error loading templates:', error);
                    console.error('Status:', status);
                    console.error('Response:', xhr.responseText);
                    $('#default_template_id')
                        .prop('disabled', false)
                        .html('<option value="">Error loading templates</option>')
                        .trigger('change');
                    if(xhr.responseJSON && xhr.responseJSON.error) {
                        console.error('Server error:', xhr.responseJSON.error);
                    }
                }
            });
        }

        // Sections (Forms) loading function
        function loadSections(tenantId) {
            if (!tenantId) {
                $('#section_ids').html('').trigger('change');
                return;
            }

            console.log('Loading sections for tenant:', tenantId);

            $.ajax({
                url: '{{ route("services.get-sections") }}',
                type: 'GET',
                data: { tenant_id: tenantId },
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function() {
                    console.log('Sending request to get sections for tenant:', tenantId);
                    $('#section_ids')
                        .prop('disabled', true)
                        .html('<option value="">Loading sections...</option>')
                        .trigger('change');
                },
                success: function(response) {
                    console.log('Sections response:', response);
                    let options = '';
                    let selectedSections = @json($selected_sections ?? []);
                    if (response && typeof response === 'object') {
                        $.each(response, function(id, title) {
                            let selected = selectedSections.includes(parseInt(id)) ? 'selected' : '';
                            options += `<option value="${id}" ${selected}>${title}</option>`;
                        });
                        $('#section_ids')
                            .prop('disabled', false)
                            .html(options)
                            .trigger('change');
                    } else {
                        console.error('Invalid response format:', response);
                        $('#section_ids')
                            .prop('disabled', false)
                            .html('')
                            .trigger('change');
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Error loading sections:', error);
                    console.error('Status:', status);
                    console.error('Response:', xhr.responseText);
                    $('#section_ids')
                        .prop('disabled', false)
                        .html('')
                        .trigger('change');
                    if(xhr.responseJSON && xhr.responseJSON.error) {
                        console.error('Server error:', xhr.responseJSON.error);
                    }
                }
            });
        }

        // Initialize fee type visibility and handle changes - using the function defined above
        $('#fee_type').on('change', function() {
            handleFeeTypeVisibility($(this).val());
        });

        // Load inspectors, templates, and sections on page load if tenant is selected
        @if(!session('tenant_id') && (old('tenant_id') || (isset($service) && $service->tenant_id)))
            loadInspectors('{{ old("tenant_id", isset($service) ? $service->tenant_id : "") }}');
            loadTemplates('{{ old("tenant_id", isset($service) ? $service->tenant_id : "") }}');
            loadSections('{{ old("tenant_id", isset($service) ? $service->tenant_id : "") }}');
        @endif
        
        // Simplified form submission handler
        $('#service-form').on('submit', function(e) {
            console.log('=== SIMPLIFIED FORM SUBMIT EVENT ===');
            
            // STEP 1: Validation check for visible required fields only
            let hasErrors = false;
            let firstErrorField = null;

            // Clear any previous validation styling
            $('.is-invalid').removeClass('is-invalid');
            $('.invalid-feedback').hide();
            $('.alert-danger[role="alert"]').remove();
            
            // Only validate visible required fields
            $('input[required]:visible, select[required]:visible, textarea[required]:visible').each(function() {
                if (!$(this).val() || $(this).val().trim() === '') {
                    hasErrors = true;
                    $(this).addClass('is-invalid');
                    
                    let fieldLabel = $(this).siblings('label').text() || $(this).attr('name');
                    let errorMessage = `${fieldLabel.replace('*', '').trim()} is required.`;
                    
                    let existingFeedback = $(this).siblings('.invalid-feedback');
                    if (existingFeedback.length > 0) {
                        existingFeedback.text(errorMessage).show();
                    } else {
                        $(this).after(`<div class="invalid-feedback" style="display: block;">${errorMessage}</div>`);
                    }
                    
                    if (!firstErrorField) {
                        firstErrorField = $(this);
                    }
                }
            });
            
            if (hasErrors) {
                console.log('❌ Form has validation errors - submission blocked');
                
                if (firstErrorField) {
                    $('html, body').animate({
                        scrollTop: firstErrorField.offset().top - 100
                    }, 500);
                    firstErrorField.focus();
                }
                
                $('.card-body').prepend('<div class="alert alert-danger alert-dismissible fade show" role="alert"><i class="mdi mdi-alert-circle-outline me-2"></i>Please fill in all required fields.<button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>');
                
                e.preventDefault();
                return false;
            }
            
            // STEP 2: Remove service fees from submission (hidden fields)
            $('input[name*="service_fees"], select[name*="service_fees"], textarea[name*="service_fees"]').remove();
            
            console.log('✅ Form validation passed, allowing submission');
        });

        // Catch any JavaScript errors that might prevent submission
        window.addEventListener('error', function(e) {
            console.log('❌ JavaScript Error:', e.error);
            console.log('Error message:', e.message);
            console.log('Error filename:', e.filename);
            console.log('Error line:', e.lineno);
        });

        // Prevent typing negative values in number inputs
        function preventNegativeInput(input) {
            // Remove minus sign if typed
            if (input.value < 0) {
                input.value = '';
            }
        }

        // Prevent decimal in duration fields (minutes should be whole numbers)
        function preventDecimalInDuration(input) {
            // Check if this is a duration field (name contains 'duration' or '[mins]')
            if (input.name.includes('duration') || input.name.includes('[mins]')) {
                // Remove decimal part if present
                if (input.value.includes('.')) {
                    input.value = Math.floor(input.value);
                }
            }
        }

        // Prevent minus key and negative paste, also block decimal for duration fields
        function handleNumberKeydown(e) {
            const input = e.target;
            
            // Block minus key (keyCode 189, 109) and negative signs
            if (e.keyCode === 189 || e.keyCode === 109 || e.key === '-') {
                e.preventDefault();
                return false;
            }

            // Block decimal point for duration and mins fields
            if ((input.name.includes('duration') || input.name.includes('[mins]')) && 
                (e.keyCode === 190 || e.keyCode === 110 || e.key === '.')) {
                e.preventDefault();
                return false;
            }
        }

        // Apply to all number inputs
        $(document).on('input', 'input[type="number"]', function() {
            preventNegativeInput(this);
            preventDecimalInDuration(this);
        });

        $(document).on('keydown', 'input[type="number"]', function(e) {
            handleNumberKeydown(e);
        });

        // Handle paste events to prevent negative values and decimals in duration
        $(document).on('paste', 'input[type="number"]', function(e) {
            const input = this;
            setTimeout(() => {
                preventNegativeInput(input);
                preventDecimalInDuration(input);
            }, 1);
        });

        // Clear validation errors when user starts typing/selecting
        $(document).on('input change', 'input, select, textarea', function() {
            if ($(this).hasClass('is-invalid')) {
                $(this).removeClass('is-invalid');
                $(this).siblings('.invalid-feedback').hide();
                
                // Hide general error message if all fields are now valid
                setTimeout(() => {
                    if ($('.is-invalid').length === 0) {
                        $('.alert-danger[role="alert"]').fadeOut();
                    }
                }, 100);
            }
        });

        // Also clear validation on Select2 change
        $(document).on('select2:select', '.select2', function() {
            if ($(this).hasClass('is-invalid')) {
                $(this).removeClass('is-invalid');
                $(this).siblings('.invalid-feedback').hide();
            }
        });
    });
</script>
@endpush