@php
    $isEdit = isset($propertyAgeFee) && $propertyAgeFee->exists;
    $tenant_id = session('tenant_id');
@endphp

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">                

                <form class="form-horizontal custom-validation" 
                      action="{{ $form_action }}" 
                      method="POST" 
                      id="property-age-fee-form">
                    @csrf
                    @if($isEdit)
                        @method('PATCH')
                    @endif

                    @if(!$tenant_id || $tenant_id == 0)
                        <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 ? $propertyAgeFee->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 property age fee applies</div>
                                </div>
                            </div>
                        </div>
                    @else
                        <input type="hidden" name="tenant_id" value="{{ $tenant_id }}">
                    @endif

                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="service_id" class="form-label">Service <span class="text-danger">*</span></label>
                                <select class="form-select select2 @error('service_id') is-invalid @enderror" id="service_id" name="service_id" required>
                                    <option value="">Select Service</option>
                                    @foreach($services ?? [] as $id => $name)
                                        <option value="{{ $id }}" {{ old('service_id', $isEdit ? $propertyAgeFee->service_id : '') == $id ? 'selected' : '' }}>
                                            {{ $name }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('service_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <div class="form-text">Select the service type for which this fee applies</div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="fee" class="form-label">Fee Amount <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <span class="input-group-text">$</span>
                                    <input type="number" 
                                           class="form-control @error('fee') is-invalid @enderror" 
                                           id="fee" 
                                           name="fee" 
                                           value="{{ old('fee', $isEdit ? $propertyAgeFee->fee : '') }}" 
                                           step="0.01" 
                                           min="0" 
                                           placeholder="0.00"
                                           required>
                                </div>
                                @error('fee')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <div class="form-text">Enter the additional fee amount for properties in this age range</div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="constructed_from" class="form-label">Construction Start Year <span class="text-danger">*</span></label>
                                <input type="number" 
                                       class="form-control @error('constructed_from') is-invalid @enderror" 
                                       id="constructed_from" 
                                       name="constructed_from" 
                                       value="{{ old('constructed_from', $isEdit ? $propertyAgeFee->constructed_from : '') }}" 
                                       min="1700" 
                                       max="3000" 
                                       placeholder="e.g., 1900"
                                       required>
                                @error('constructed_from')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <div class="form-text">Enter the starting year of the construction period (1700-3000)</div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="constructed_to" class="form-label">Construction End Year <span class="text-danger">*</span></label>
                                <input type="number" 
                                       class="form-control @error('constructed_to') is-invalid @enderror" 
                                       id="constructed_to" 
                                       name="constructed_to" 
                                       value="{{ old('constructed_to', $isEdit ? $propertyAgeFee->constructed_to : '') }}" 
                                       min="1700" 
                                       max="3000" 
                                       placeholder="e.g., 1950"
                                       required>
                                @error('constructed_to')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <div class="form-text">Enter the ending year of the construction period (must be greater than start year)</div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="sort_order" class="form-label">Sort Order</label>
                                <input type="number" 
                                       class="form-control @error('sort_order') is-invalid @enderror" 
                                       id="sort_order" 
                                       name="sort_order" 
                                       value="{{ old('sort_order', $isEdit ? $propertyAgeFee->sort_order : '') }}" 
                                       min="0" 
                                       placeholder="Auto-generated if left empty">
                                @error('sort_order')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <div class="form-text">Leave empty to auto-assign the next available order</div>
                            </div>
                        </div>
                    </div>

                    <!-- Construction Period Preview -->
                    <div class="row">
                        <div class="col-12">
                            <div class="alert alert-info" id="period-preview" style="display: none;">
                                <strong>Construction Period Preview:</strong> <span id="period-text"></span>
                            </div>
                        </div>
                    </div>

                    <div class="text-end mt-3">
                        <a href="{{ route('property-age-fees.index') }}" class="btn btn-dark waves-effect me-2">Cancel</a>
                        <button type="submit" class="btn btn-primary">{{ $isEdit ? 'Update' : 'Add' }} Property Age Fee</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@push('page_script')
<meta name="csrf-token" content="{{ csrf_token() }}">
<script src="{{ asset('assets/libs/parsleyjs/parsley.min.js') }}"></script>
<script src="{{ asset('assets/js/pages/form-validation.init.js') }}"></script>
<script>
$(document).ready(function() {
    // Update construction period preview
    function updatePeriodPreview() {
        const fromYear = $('#constructed_from').val();
        const toYear = $('#constructed_to').val();
        
        if (fromYear && toYear) {
            if (parseInt(toYear) > parseInt(fromYear)) {
                $('#period-text').text(`${fromYear} - ${toYear}`);
                $('#period-preview').show();
                
                // Remove any error styling
                $('#constructed_to').removeClass('is-invalid');
                $('#constructed_to').next('.invalid-feedback').remove();
            } else if (toYear <= fromYear) {
                $('#period-preview').hide();
                
                // Add error styling if end year is not greater than start year
                if (!$('#constructed_to').hasClass('is-invalid')) {
                    $('#constructed_to').addClass('is-invalid');
                    if (!$('#constructed_to').next('.invalid-feedback').length) {
                        $('#constructed_to').after('<div class="invalid-feedback">End year must be greater than start year</div>');
                    }
                }
            }
        } else {
            $('#period-preview').hide();
        }
    }

    // Bind events to construction year inputs
    $('#constructed_from, #constructed_to').on('input change', updatePeriodPreview);

    // Initialize preview on page load
    updatePeriodPreview();

    // Form validation
    $('#property-age-fee-form').parsley({
        errorClass: 'is-invalid',
        successClass: 'is-valid',
        errorsWrapper: '<div class="invalid-feedback"></div>',
        errorTemplate: '<span></span>'
    });

    // Custom validation for construction years
    $('#constructed_to').on('blur', function() {
        const fromYear = parseInt($('#constructed_from').val());
        const toYear = parseInt($(this).val());
        
        if (fromYear && toYear && toYear <= fromYear) {
            $(this).addClass('is-invalid');
            if (!$(this).next('.invalid-feedback').length) {
                $(this).after('<div class="invalid-feedback">Construction end year must be greater than start year</div>');
            }
        } else {
            $(this).removeClass('is-invalid');
            $(this).next('.invalid-feedback').remove();
        }
    });

    // Fee amount formatting
    $('#fee').on('blur', function() {
        const value = parseFloat($(this).val());
        if (!isNaN(value)) {
            $(this).val(value.toFixed(2));
        }
    });

    // Initialize Select2 for better dropdown experience
    if (typeof $.fn.select2 !== 'undefined') {
        $('#service_id').select2({
            placeholder: 'Select Service',
            allowClear: true
        });

        @if(!$tenant_id || $tenant_id == 0)
            $('#tenant_id').select2({
                placeholder: 'Select Tenant',
                allowClear: false
            });
        @endif
    }

    // Tenant-dependent Service dropdown functionality
    if ($('#tenant_id').length) {
        $('#tenant_id').on('change', function() {
            var selectedTenantId = $(this).val();
            var $serviceSelect = $('#service_id');
            
            if (selectedTenantId) {
                // Enable service select and load services for the selected tenant
                $serviceSelect.prop('disabled', false);
                loadServices(selectedTenantId);
            } else {
                // Disable service select and clear options
                $serviceSelect.prop('disabled', true)
                    .html('<option value="">Select Tenant First</option>')
                    .trigger('change');
            }
        });
    }

    // Function to load services for a given tenant
    function loadServices(tenantId) {
        if (!tenantId) {
            $('#service_id').html('<option value="">Select Tenant First</option>').trigger('change');
            return;
        }

        var $serviceSelect = $('#service_id');
        
        // Show loading state
        $serviceSelect.prop('disabled', true)
            .html('<option value="">Loading services...</option>')
            .trigger('change');

        $.ajax({
            url: '{{ route("services.index") }}',
            type: 'GET',
            data: { tenant_id: tenantId, ajax: 1 },
            dataType: 'json',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                let options = '<option value="">Select Service</option>';
                if (response && response.status && response.services) {
                    $.each(response.services, function(id, name) {
                        let selected = '{{ old("service_id", $isEdit ? ($propertyAgeFee->service_id ?? "") : "") }}' == id ? 'selected' : '';
                        options += `<option value="${id}" ${selected}>${name}</option>`;
                    });
                    $serviceSelect
                        .prop('disabled', false)
                        .html(options)
                        .trigger('change');
                    
                    // Reinitialize Select2 after loading new options
                    if (typeof $.fn.select2 !== 'undefined') {
                        $serviceSelect.select2({
                            placeholder: 'Select Service',
                            allowClear: true
                        });
                    }
                } else {
                    $serviceSelect
                        .prop('disabled', false)
                        .html('<option value="">No services found</option>')
                        .trigger('change');
                }
            },
            error: function(xhr, status, error) {
                console.error('Error loading services:', error);
                $serviceSelect
                    .prop('disabled', false)
                    .html('<option value="">Error loading services</option>')
                    .trigger('change');
            }
        });
    }

    // Load services on page load if tenant is already selected
    @if(!$tenant_id || $tenant_id == 0)
        @if(old('tenant_id') || ($isEdit && $propertyAgeFee->tenant_id))
            loadServices('{{ old("tenant_id", $isEdit ? $propertyAgeFee->tenant_id : "") }}');
        @endif
    @endif
});
</script>
@endpush