@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 service 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">Service 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>                       

                        <div class="col-md-6">
                            <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>

                        <div class="col-md-6">
                            <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" required>
                                    <option value="">Select Fee Type</option>
                                    @foreach(['Fixed', 'Condo', 'Multihouse', 'Variable', 'Quotation'] as $type)
                                        <option value="{{ $type }}" {{ old('fee_type', $isEdit ? $service->fee_type : '') == $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>

                        <!-- Base Fee (shared except Quotation removal) -->
                        <div class="col-md-4 fee-type-variable fee-type-condo fee-type-multihouse variable-base-fee" style="display: none;">
                            <div class="mb-3">
                                <label for="base_fee" class="form-label">Base Fee ($) <span class="text-danger">*</span></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>

                        <!-- Duration (moved beside Base Fee for Condo & Multihouse; also visible for Fixed) -->
                        <div class="col-md-4 fee-type-condo fee-type-multihouse fee-type-fixed" style="display: none;">
                            <div class="mb-3">
                                <label for="duration" class="form-label">Duration (minutes) <span class="text-danger">*</span></label>
                                <input type="number" min="0" step="1" class="form-control @error('duration') is-invalid @enderror" 
                                    id="duration" name="duration" value="{{ old('duration', $isEdit ? $service->duration : '0') }}" required>
                                @error('duration')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-4 fee-type-variable" style="display: none;">
                            <div class="mb-3">
                                <label for="base_sqft" class="form-label">Base Sq.ft <span class="text-danger">*</span></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;">
                            <div class="mb-3">
                                <label for="fee_per_sqft" class="form-label">Fee per Sq.ft ($) <span class="text-danger">*</span></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>

                        <!-- Fixed Fee Type Field -->
                        <div class="col-md-4 fee-type-fixed" style="display: none;">
                            <div class="mb-3">
                                <label for="fee" class="form-label">Fee ($) <span class="text-danger">*</span></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>

                        <!-- Original duration block removed (now contextual above) -->

                        <!-- <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> -->

                        <div class="col-md-4">
                            <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>

                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="default_template_id" class="form-label">Default Template <span class="text-danger">*</span></label>
                                <select class="form-select select2 @error('default_template_id') is-invalid @enderror" id="default_template_id" name="default_template_id" required>
                                    <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>

                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="master_language_id" class="form-label">Language <span class="text-danger">*</span></label>
                                <select class="form-select select2 @error('master_language_id') is-invalid @enderror" id="master_language_id" name="master_language_id" required>
                                    <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>
                        <div class="col-md-6">
                            <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>

                        <div class="col-md-6">
                            <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>

                        <!-- Fee Type Specific Options -->
                        <div class="col-md-6 fee-type-quotation" style="display: none;">
                            <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>

                        <div class="col-md-6 fee-type-fixed" style="display: none;">
                            <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>

                    <!-- Condo Service Fees Section (Duration removed; only condo_type + fee) -->
                    <div class="row mt-3" id="condo-service-fees-section" style="display: none;">
                        <div class="col-12">
                            <h5>Service Fees</h5>
                            <div class="table-responsive">
                                <table class="table table-bordered" id="condo-service-fees-table">
                                    <thead>
                                        <tr>
                                            <th>Condo Type <span class="text-danger">*</span></th>
                                            <th>Fee (Per Unit) ($) <span class="text-danger">*</span></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @php
                                            $oldFees = old('service_fees');
                                            $bedroomFee = $oldFees[0]['fee'] ?? ($isEdit ? optional($service->serviceFees->firstWhere('condo_type','bedroom'))->fee : '');
                                            $bathroomFee = $oldFees[1]['fee'] ?? ($isEdit ? optional($service->serviceFees->firstWhere('condo_type','bathroom'))->fee : '');
                                        @endphp
                                        <tr>
                                            <td>
                                                <input type="hidden" name="service_fees[0][condo_type]" value="bedroom">
                                                <input type="text" class="form-control" value="Bedroom" readonly>
                                            </td>
                                            <td>
                                                <input type="number" step="0.01" min="0" class="form-control" name="service_fees[0][fee]" value="{{ $bedroomFee }}" required>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <input type="hidden" name="service_fees[1][condo_type]" value="bathroom">
                                                <input type="text" class="form-control" value="Bathroom" readonly>
                                            </td>
                                            <td>
                                                <input type="number" step="0.01" min="0" class="form-control" name="service_fees[1][fee]" value="{{ $bathroomFee }}" required>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <!-- Service Fees Section -->
                    <div class="row mt-3" id="service-fees-section" style="display: none;">
                        <div class="col-12">
                            <h5>Service Fees</h5>
                            <div class="table-responsive">
                                <table class="table table-bordered" id="service-fees-table">
                                    <thead>
                                        @php $initialFeeType = old('fee_type', $isEdit ? $service->fee_type : ''); @endphp
                                        @if($initialFeeType === 'Multihouse')
                                            <tr>
                                                <th>Unit <span class="text-danger">*</span></th>
                                                <th>Fee ($) <span class="text-danger">*</span></th>
                                                <th>Action</th>
                                            </tr>
                                        @else
                                            <tr>
                                                <th>Duration (mins) <span class="text-danger">*</span></th>
                                                <th>Sq.ft From <span class="text-danger">*</span></th>
                                                <th>Sq.ft To <span class="text-danger">*</span></th>
                                                <th>Fee ($) <span class="text-danger">*</span></th>
                                                <th>Action</th>
                                            </tr>
                                        @endif
                                    </thead>
                                    <tbody>
                                        @if($initialFeeType === 'Multihouse')
                                            @if(old('service_fees'))
                                                @foreach(old('service_fees') as $index => $fee)
                                                    <tr>
                                                        @if(isset($fee['id']))
                                                            <input type="hidden" name="service_fees[{{ $index }}][id]" value="{{ $fee['id'] }}">
                                                        @endif
                                                        <td>
                                                            <input type="text" class="form-control" name="service_fees[{{ $index }}][unit]" value="{{ $fee['unit'] ?? '' }}" required>
                                                        </td>
                                                        <td>
                                                            <input type="number" step="0.01" min="0" class="form-control" name="service_fees[{{ $index }}][fee]" value="{{ $fee['fee'] ?? '' }}" required>
                                                        </td>
                                                        <td>
                                                            <button type="button" class="btn btn-sm remove-fee">
                                                                <img src="{{ asset('images/delete.svg') }}">
                                                            </button>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            @elseif($isEdit && $service->serviceFees->count() > 0)
                                                @php $mhFees = $service->serviceFees->where('unit','!=',null)->where('condo_type',null)->values(); @endphp
                                                @foreach($mhFees as $index => $fee)
                                                    <tr>
                                                        <input type="hidden" name="service_fees[{{ $index }}][id]" value="{{ $fee->id }}">
                                                        <td>
                                                            <input type="text" class="form-control" name="service_fees[{{ $index }}][unit]" value="{{ $fee->unit }}" required>
                                                        </td>
                                                        <td>
                                                            <input type="number" step="0.01" min="0" class="form-control" name="service_fees[{{ $index }}][fee]" value="{{ $fee->fee }}" required>
                                                        </td>
                                                        <td>
                                                            <button type="button" class="btn btn-sm remove-fee">
                                                                <img src="{{ asset('images/delete.svg') }}">
                                                            </button>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            @endif
                                        @else
                                            @if(old('service_fees'))
                                                @foreach(old('service_fees') as $index => $fee)
                                                    @if(!isset($fee['condo_type']))
                                                    <tr>
                                                        @if(isset($fee['id']))
                                                            <input type="hidden" name="service_fees[{{ $index }}][id]" value="{{ $fee['id'] }}">
                                                        @endif
                                                        <td>
                                                            <input type="number" min="0" step="1" class="form-control" name="service_fees[{{ $index }}][mins]" value="{{ $fee['mins'] ?? '' }}" required>
                                                        </td>
                                                        <td>
                                                            <input type="number" min="0" class="form-control" name="service_fees[{{ $index }}][sqft_from]" value="{{ $fee['sqft_from'] ?? '' }}" required>
                                                        </td>
                                                        <td>
                                                            <input type="number" min="0" class="form-control" name="service_fees[{{ $index }}][sqft_to]" value="{{ $fee['sqft_to'] ?? '' }}" required>
                                                        </td>
                                                        <td>
                                                            <input type="number" step="0.01" min="0" class="form-control" name="service_fees[{{ $index }}][fee]" value="{{ $fee['fee'] ?? '' }}" required>
                                                        </td>
                                                        <td>
                                                            <button type="button" class="btn btn-sm remove-fee">
                                                                <img src="{{ asset('images/delete.svg') }}">
                                                            </button>
                                                        </td>
                                                    </tr>
                                                    @endif
                                                @endforeach
                                            @elseif($isEdit && $service->serviceFees->count() > 0)
                                                @foreach($service->serviceFees as $index => $fee)
                                                    @if(!$fee->condo_type && $fee->unit === null)
                                                    <tr>
                                                        <input type="hidden" name="service_fees[{{ $index }}][id]" value="{{ $fee->id }}">
                                                        <td>
                                                            <input type="number" min="0" step="1" class="form-control" name="service_fees[{{ $index }}][mins]" value="{{ $fee->mins }}" required>
                                                        </td>
                                                        <td>
                                                            <input type="number" min="0" class="form-control" name="service_fees[{{ $index }}][sqft_from]" value="{{ $fee->sqft_from }}" required>
                                                        </td>
                                                        <td>
                                                            <input type="number" min="0" class="form-control" name="service_fees[{{ $index }}][sqft_to]" value="{{ $fee->sqft_to }}" required>
                                                        </td>
                                                        <td>
                                                            <input type="number" step="0.01" min="0" class="form-control" name="service_fees[{{ $index }}][fee]" value="{{ $fee->fee }}" required>
                                                        </td>
                                                        <td>
                                                            <button type="button" class="btn btn-sm remove-fee">
                                                                <img src="{{ asset('images/delete.svg') }}">
                                                            </button>
                                                        </td>
                                                    </tr>
                                                    @endif
                                                @endforeach
                                            @endif
                                        @endif
                                    </tbody>
                                </table>
                                <button type="button" class="btn btn-info" id="add-fee-row">
                                    <i class="mdi mdi-plus"></i> Add Fee Row
                                </button>
                            </div>
                        </div>
                    </div>

                    <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' }} Service</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 ===');
        console.log('Is Edit Mode:', {{ $isEdit ? 'true' : 'false' }});
        @if($isEdit && isset($service))
        console.log('Service Fee Type (server):', '{{ $service->fee_type }}');
        console.log('Service ID:', {{ $service->id }});
        console.log('Service Fees Count:', {{ $service->serviceFees->count() }});
        @endif
        console.log('Fee Type Field Value (DOM):', $('#fee_type').val());
        console.log('Fee Type Selected Option:', $('#fee_type option:selected').text());
        
        // Initialize fee row count based on existing fees or old input
        let feeRowCount = {{ $isEdit ? $service->serviceFees->count() : (old('service_fees') ? count(old('service_fees')) : 0) }};

        // DEFINE FUNCTION FIRST before calling it!
        function handleFeeTypeVisibility(feeType) {
            console.log('=== HANDLING FEE TYPE VISIBILITY ===');
            console.log('Selected fee type:', feeType);
            
            // Hide all fee type specific fields by default
            $('.fee-type-variable, .fee-type-fixed, .fee-type-quotation, .fee-type-condo, .fee-type-multihouse').hide();
            
            // Reset all required fields
            $('.fee-type-variable input, .fee-type-fixed input, .fee-type-condo input, .fee-type-multihouse input').prop('required', false);
            
            // Also reset specific fields that might be required from other fee types
            $('#base_fee, #base_sqft, #fee_per_sqft, #fee').prop('required', false);
            
            // Hide both Service Fees sections by default
            $('#service-fees-section').hide();
            $('#condo-service-fees-section').hide();
            
            // AGGRESSIVE CLEANUP: Remove required attribute from ALL service fee inputs and clear validation errors
            $('#service-fees-section input, #condo-service-fees-section input').each(function() {
                $(this).prop('required', false)
                       .removeClass('is-invalid')
                       .next('.invalid-feedback').remove();
            });
            
            // SUPER AGGRESSIVE CLEANUP: Completely remove service fee form inputs from DOM for Fixed/Quotation types
            if (feeType === 'Fixed' || feeType === 'Quotation') {
                console.log('🗑️ REMOVING service fee inputs from DOM for Fixed/Quotation type');
                $('#service-fees-table tbody').html(''); // Completely empty the table body for regular service fees
                // Only remove regular service_fees inputs, NOT condo service fees
                $('#service-fees-section input[name*="service_fees"]').remove();
            }
            
            // Also disable any remaining service fee inputs so they don't get submitted
            $('#service-fees-section input, #condo-service-fees-section input').prop('disabled', true);
            
            // Reset service fee table header to default (Variable pattern)
            $('#service-fees-table thead tr').html('<th>Duration (mins) <span class="text-danger">*</span></th><th>Sq.ft From <span class="text-danger">*</span></th><th>Sq.ft To <span class="text-danger">*</span></th><th>Fee ($) <span class="text-danger">*</span></th><th>Action</th>');
            
            // Show relevant fields based on fee type
            switch(feeType) {
                case 'Fixed':
                    console.log('Setting up Fixed fee type');
                    // Show Fixed fee type fields
                    $('.fee-type-fixed').show();
                    $('#fee').prop('required', true);
                    // Hide Service Fees sections for Fixed type
                    $('#service-fees-section').hide();
                    $('#condo-service-fees-section').hide();
                    // Ensure NO service fees are required for Fixed type
                    $('#service-fees-section input, #condo-service-fees-section input').prop('required', false);
                    break;
                    
                case 'Condo':
                    console.log('Setting up Condo fee type');
                    // Show Base Fee field (shared with Variable)
                    $('.fee-type-condo').show();
                    $('#base_fee').prop('required', true);
                    // Show Condo Service Fees section only
                    $('#condo-service-fees-section').show();
                    $('#service-fees-section').hide();
                    // Enable and make Condo service fees required only for Condo type
                    $('#condo-service-fees-section input').prop('disabled', false);
                    // Make Fee (Per Unit) required for Condo type
                    $('#condo-service-fees-section input[name*="[fee]"]')
                        .prop('disabled', false)
                        .prop('required', true);
                    // Keep condo_type fields readonly but enabled
                    $('#condo-service-fees-section input[name*="[condo_type]"]').prop('disabled', false);
                    console.log('✅ Condo inputs enabled - fees:', $('#condo-service-fees-section input[name*="[fee]"]').length);
                    break;
                    
                case 'Multihouse':
                    console.log('Setting up Multihouse fee type');
                    // Helper to add a blank multihouse row if needed
                    function addMultihouseRow(){
                        const idx = feeRowCount;
                        const rowHtml = `<tr>
                            <td><input type="text" class="form-control" name="service_fees[${idx}][unit]" required></td>
                            <td><input type="number" step="0.01" min="0" class="form-control" name="service_fees[${idx}][fee]" required></td>
                            <td><button type="button" class="btn btn-sm remove-fee"><img src="{{ asset('images/delete.svg') }}"></button></td>
                        </tr>`;
                        $('#service-fees-table tbody').append(rowHtml);
                        feeRowCount++;
                    }

                    $('.fee-type-multihouse').show();
                    $('#base_fee').prop('required', true);
                    $('#service-fees-section').show();
                    $('#condo-service-fees-section').hide();
                    // Adjust header
                    $('#service-fees-table thead tr').html('<th>Unit <span class="text-danger">*</span></th><th>Fee ($) <span class="text-danger">*</span></th><th>Action</th>');
                    // Remove any variable style rows (identified by mins field)
                    $('#service-fees-table tbody tr').each(function(){
                        if($(this).find('input[name*="[mins]"]').length){ $(this).remove(); }
                    });
                    // If no unit rows exist, seed one
                    if($('#service-fees-table tbody input[name*="[unit]"]').length === 0){
                        addMultihouseRow();
                    }
                    // Enable proper inputs
                    $('#service-fees-table tbody input').prop('disabled', false);
                    $('#service-fees-table tbody input[name*="[unit]"], #service-fees-table tbody input[name*="[fee]"]').prop('required', true);
                    // Remove required attribute from any leftover variable inputs just in case
                    $('#service-fees-table tbody input[name*="[mins]"], #service-fees-table tbody input[name*="[sqft_from]"], #service-fees-table tbody input[name*="[sqft_to]"]').prop('required', false);
                    console.log('✅ Multihouse rows rebuilt. Row count now:', $('#service-fees-table tbody tr').length);
                    break;
                    
                case 'Variable':
                    console.log('Setting up Variable fee type');
                    function addVariableRow(){
                        const idx = feeRowCount;
                        const rowHtml = `<tr>
                            <td><input type="number" min="0" step="1" class="form-control" name="service_fees[${idx}][mins]" required></td>
                            <td><input type="number" min="0" class="form-control" name="service_fees[${idx}][sqft_from]" required></td>
                            <td><input type="number" min="0" class="form-control" name="service_fees[${idx}][sqft_to]" required></td>
                            <td><input type="number" step="0.01" min="0" class="form-control" name="service_fees[${idx}][fee]" required></td>
                            <td><button type="button" class="btn btn-sm remove-fee"><img src="{{ asset('images/delete.svg') }}"></button></td>
                        </tr>`;
                        $('#service-fees-table tbody').append(rowHtml);
                        feeRowCount++;
                    }

                    $('.fee-type-variable').eq(0).show();
                    $('#base_fee').prop('required', true);
                    $('#service-fees-section').show();
                    $('#condo-service-fees-section').hide();
                    // Reset header for variable pattern
                    $('#service-fees-table thead tr').html('<th>Duration (mins) <span class="text-danger">*</span></th><th>Sq.ft From <span class="text-danger">*</span></th><th>Sq.ft To <span class="text-danger">*</span></th><th>Fee ($) <span class="text-danger">*</span></th><th>Action</th>');
                    // Remove any multihouse rows (identified by unit field)
                    $('#service-fees-table tbody tr').each(function(){
                        if($(this).find('input[name*="[unit]"]').length){ $(this).remove(); }
                    });
                    // If no variable rows exist, seed one
                    if($('#service-fees-table tbody input[name*="[mins]"]').length === 0){
                        addVariableRow();
                    }
                    // Enable variable inputs & set required
                    $('#service-fees-table tbody input').prop('disabled', false);
                    $('#service-fees-table tbody input[name*="[mins]"], #service-fees-table tbody input[name*="[fee]"], #service-fees-table tbody input[name*="[sqft_from]"], #service-fees-table tbody input[name*="[sqft_to]"]').prop('required', true);
                    // Remove required from multihouse pattern just in case
                    $('#service-fees-table tbody input[name*="[unit]"]').prop('required', false);
                    $('#condo-service-fees-section input').prop('required', false);
                    console.log('✅ Variable rows rebuilt. Row count now:', $('#service-fees-table tbody tr').length);
                    break;
                    
                case 'Quotation':
                    console.log('Setting up Quotation fee type');
                    // Show only Base Sq.ft and Fee per Sq.ft (remove Base Fee per requirement)
                    $('.fee-type-variable').hide();
                    $('.variable-base-fee').hide().find('input').prop('required', false);
                    $('#base_sqft, #fee_per_sqft').prop('required', false);
                    // Hide both Service Fees sections for Quotation type
                    $('#service-fees-section').hide();
                    $('#condo-service-fees-section').hide();
                    // Ensure service fees are not required for Quotation type
                    $('#service-fees-section input, #condo-service-fees-section input').prop('required', false);
                    break;
            }

            console.log('After setup:');
            console.log('- Service fees section visible:', $('#service-fees-section').is(':visible'));
            console.log('- Condo service fees section visible:', $('#condo-service-fees-section').is(':visible'));
            console.log('- Fee field required:', $('#fee').prop('required'));
            console.log('- Fee field visible:', $('.fee-type-fixed').is(':visible'));
        }

        // NOW trigger initial fee type visibility AFTER function is defined
        // Small delay to ensure Select2 is fully initialized before triggering fee type
        setTimeout(function() {
            let currentFeeType = $('#fee_type').val();
            console.log('🎯 INITIAL FEE TYPE TRIGGER:', currentFeeType);
            
            // If no value is selected but we're editing a service, check the server value
            @if($isEdit && isset($service->fee_type))
            if (!currentFeeType || currentFeeType === '') {
                currentFeeType = '{{ $service->fee_type }}';
                console.log('🔄 Using server fee type:', currentFeeType);
                $('#fee_type').val(currentFeeType).trigger('change');
            }
            @endif
            
            if (currentFeeType) {
                console.log('✅ Triggering handleFeeTypeVisibility for:', currentFeeType);
                handleFeeTypeVisibility(currentFeeType);
            } else {
                console.log('❌ No fee type found, cannot trigger visibility');
            }
        }, 200); // Increased delay to 200ms

        // 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);
            } else {
                $('#default_inspector_id').html('<option value="">Select Inspector</option>').trigger('change');
                $('#default_template_id').html('<option value="">Select Template</option>').trigger('change');
            }
        });

        // Fee rows handling
        $('#add-fee-row').click(function() {
            const currentFeeType = $('#fee_type').val();
            let newRow = '';
            if (currentFeeType === 'Multihouse') {
                newRow = `
                <tr>
                    <td>
                        <input type="text" class="form-control" name="service_fees[${feeRowCount}][unit]" required>
                    </td>
                    <td>
                        <input type="number" step="0.01" min="0" class="form-control" name="service_fees[${feeRowCount}][fee]" required>
                    </td>
                    <td>
                        <button type="button" class="btn btn-sm remove-fee">
                            <img src="{{ asset('images/delete.svg') }}">
                        </button>
                    </td>
                </tr>`;
            } else {
                newRow = `
                <tr>
                    <td>
                        <input type="number" min="0" step="1" class="form-control" name="service_fees[${feeRowCount}][mins]" required>
                    </td>
                    <td>
                        <input type="number" min="0" class="form-control" name="service_fees[${feeRowCount}][sqft_from]" required>
                    </td>
                    <td>
                        <input type="number" min="0" class="form-control" name="service_fees[${feeRowCount}][sqft_to]" required>
                    </td>
                    <td>
                        <input type="number" step="0.01" min="0" class="form-control" name="service_fees[${feeRowCount}][fee]" required>
                    </td>
                    <td>
                        <button type="button" class="btn btn-sm remove-fee">
                            <img src="{{ asset('images/delete.svg') }}">
                        </button>
                    </td>
                </tr>`;
            }
            $('#service-fees-table tbody').append(newRow);
            feeRowCount++;
        });

        $(document).on('click', '.remove-fee', function() {
            $(this).closest('tr').remove();
        });

        // 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);
                    }
                }
            });
        }

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

        // Load inspectors and templates 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 : "") }}');
        @endif
        
        // Single unified form submission handler
        $('#service-form').on('submit', function(e) {
            console.log('=== UNIFIED FORM SUBMIT EVENT ===');
            
            // Get current fee type to determine proper handling
            let currentFeeType = $('#fee_type').val();
            console.log('Current fee type on submit:', currentFeeType);
            
            // STEP 1: Validation check first
            let hasErrors = false;
            let missingFields = [];
            let firstErrorField = null;

            // Clear any previous validation styling
            $('.is-invalid').removeClass('is-invalid');
            $('.invalid-feedback').hide();
            $('.alert-danger[role="alert"]').remove();
            
            $('input[required], select[required], textarea[required]').each(function() {
                if (!$(this).val() || $(this).val().trim() === '') {
                    missingFields.push({
                        name: $(this).attr('name'), 
                        id: $(this).attr('id'),
                        visible: $(this).is(':visible'),
                        parent_visible: $(this).closest('.col-md-4, .col-md-6, .col-md-12').is(':visible')
                    });
                    if ($(this).is(':visible') && $(this).closest('.col-md-4, .col-md-6, .col-md-12').is(':visible')) {
                        hasErrors = true;
                        // Add visual feedback - highlight the field
                        $(this).addClass('is-invalid');
                        
                        // Add or show error message
                        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>`);
                        }
                        
                        // Remember the first error field to scroll to it
                        if (!firstErrorField) {
                            firstErrorField = $(this);
                        }
                    }
                }
            });
            
            if (hasErrors) {
                console.log('❌ Form has validation errors - submission blocked');
                console.log('Missing fields:', missingFields);
                
                // Scroll to the first error field and focus it
                if (firstErrorField) {
                    $('html, body').animate({
                        scrollTop: firstErrorField.offset().top - 100
                    }, 500);
                    firstErrorField.focus();
                }
                
                // Show a general error message at the top
                $('.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: Service fees cleanup for specific fee types
            let formData = new FormData(this);
            let hasServiceFees = false;
            for (let [key, value] of formData.entries()) {
                if (key.includes('service_fees')) {
                    hasServiceFees = true;
                    break;
                }
            }
            
            // Only remove service_fees for Fixed and Quotation types
            if (hasServiceFees && (currentFeeType === 'Fixed' || currentFeeType === 'Quotation')) {
                console.log('❌ Service fees data found for Fixed/Quotation type - removing and resubmitting');
                e.preventDefault();
                
                // Remove any service_fees inputs completely
                $('input[name*="service_fees"], select[name*="service_fees"], textarea[name*="service_fees"]').remove();
                console.log('🗑️ Removed all service_fees inputs, resubmitting...');
                
                // Resubmit after cleanup
                setTimeout(() => {
                    $(this)[0].submit();
                }, 100);
                
                return false;
            }
            
            console.log('✅ Form validation passed and data is clean, allowing submission');
            // Form will submit normally
        });

        // 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