@php
    $isEdit = isset($tax) && $tax->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="tax-form">
                    @csrf
                    @if($isEdit)
                        @method('PATCH')
                    @endif

                    @if($show_tenant_dropdown ?? false)
                        <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 @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 ? $tax->tenant_id : '') == $id ? 'selected' : '' }}>
                                                {{ $name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('tenant_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </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="title" class="form-label">Tax Title <span class="text-danger">*</span></label>
                                <input type="text" 
                                       class="form-control @error('title') is-invalid @enderror" 
                                       id="title" 
                                       name="title" 
                                       value="{{ old('title', $isEdit ? $tax->title : '') }}" 
                                       maxlength="120"
                                       placeholder="e.g., State Sales Tax, Local Tax"
                                       required>
                                @error('title')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <div class="form-text">Enter a descriptive title for the tax (max 120 characters)</div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="tax_type" class="form-label">Tax Type <span class="text-danger">*</span></label>
                                <select class="form-select @error('tax_type') is-invalid @enderror" id="tax_type" name="tax_type" required>
                                    <option value="">Select Tax Type</option>
                                    <option value="Percentage" {{ old('tax_type', $isEdit ? $tax->tax_type : '') == 'Percentage' ? 'selected' : '' }}>
                                        Percentage
                                    </option>
                                    <option value="Fixed" {{ old('tax_type', $isEdit ? $tax->tax_type : '') == 'Fixed' ? 'selected' : '' }}>
                                        Fixed Amount
                                    </option>
                                </select>
                                @error('tax_type')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <div class="form-text">Choose whether the tax is a percentage or fixed amount</div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="tax_rate" class="form-label">Tax Rate <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <span class="input-group-text" id="tax_rate_symbol">
                                        @if(old('tax_type', $isEdit ? $tax->tax_type : '') == 'Percentage' || !$isEdit)
                                            %
                                        @else
                                            $
                                        @endif
                                    </span>
                                    <input type="number" 
                                           class="form-control @error('tax_rate') is-invalid @enderror" 
                                           id="tax_rate" 
                                           name="tax_rate" 
                                           value="{{ old('tax_rate', $isEdit ? $tax->tax_rate : '') }}" 
                                           step="0.01" 
                                           min="0" 
                                           max="{{ old('tax_type', $isEdit ? $tax->tax_type : '') == 'Percentage' ? '100' : '999999.99' }}"
                                           placeholder="e.g., 8.25 or 5.00"
                                           required>
                                </div>
                                @error('tax_rate')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <div class="form-text" id="rate-help-text">
                                    @if(old('tax_type', $isEdit ? $tax->tax_type : '') == 'Percentage')
                                        Enter percentage (0-100)
                                    @else
                                        Enter fixed amount
                                    @endif
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="service_id" class="form-label">Service (Optional)</label>
                                <select class="form-select @error('service_id') is-invalid @enderror" id="service_id" name="service_id">
                                    <option value="">All Services</option>
                                    @foreach($services ?? [] as $id => $name)
                                        <option value="{{ $id }}" {{ old('service_id', $isEdit ? $tax->service_id : '') == $id ? 'selected' : '' }}>
                                            {{ $name }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('service_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <div class="form-text">Leave empty to apply to all services, or select a specific service</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 ? $tax->sort_order : '0') }}" 
                                       min="0" 
                                       placeholder="0">
                                @error('sort_order')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <div class="form-text">Lower numbers appear first in lists</div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="mb-3">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="is_active" name="is_active" value="1" 
                                           {{ old('is_active', $isEdit ? $tax->is_active : true) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="is_active">
                                        Active
                                    </label>
                                </div>
                                <div class="form-text">Active taxes are available for use in calculations</div>
                            </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' }} Tax</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() {
    // Tax type change handler
    $('#tax_type').change(function() {
        const taxType = $(this).val();
        const taxRateInput = $('#tax_rate');
        const rateHelpText = $('#rate-help-text');
        const inputGroupText = $('#tax_rate_symbol');
        
        if (taxType === 'Percentage') {
            inputGroupText.text('%');
            taxRateInput.attr('max', '100');
            rateHelpText.text('Enter percentage (0-100)');
            taxRateInput.attr('placeholder', 'e.g., 8.25');
        } else if (taxType === 'Fixed') {
            inputGroupText.text('$');
            taxRateInput.attr('max', '999999.99');
            rateHelpText.text('Enter fixed amount');
            taxRateInput.attr('placeholder', 'e.g., 5.00');
        }
        
        // Clear tax rate when type changes
        taxRateInput.val('');
    });

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

    // Tenant-dependent service loading (for super admin)
    @if($show_tenant_dropdown ?? false)
    $('#tenant_id').change(function() {
        loadServicesForTenant($(this).val());
    });
    @endif

    // Function to load services for a specific tenant
    function loadServicesForTenant(tenantId) {
        const serviceSelect = $('#service_id');
        const currentServiceId = '{{ $isEdit ? $tax->service_id : "" }}';
        
        if (tenantId) {
            // Load services for selected tenant
            $.ajax({
                url: '{{ route("services.index") }}',
                method: 'GET',
                data: { tenant_id: tenantId, ajax: 1 },
                success: function(response) {
                    serviceSelect.empty().append('<option value="">All Services</option>');
                    
                    if (response.services) {
                        $.each(response.services, function(id, name) {
                            const selected = (id == currentServiceId) ? 'selected' : '';
                            serviceSelect.append(`<option value="${id}" ${selected}>${name}</option>`);
                        });
                    }
                    
                    // Reinitialize Select2 if it exists
                    if (typeof $.fn.select2 !== 'undefined' && serviceSelect.hasClass('select2-hidden-accessible')) {
                        serviceSelect.select2('destroy');
                        serviceSelect.select2({
                            placeholder: 'Select an option',
                            allowClear: true
                        });
                    }
                },
                error: function() {
                    console.error('Failed to load services for tenant');
                }
            });
        } else {
            serviceSelect.empty().append('<option value="">All Services</option>');
        }
    }

    // Load services on page load if editing and tenant dropdown is shown
    @if($isEdit && ($show_tenant_dropdown ?? false))
    $(document).ready(function() {
        const tenantId = $('#tenant_id').val();
        if (tenantId) {
            loadServicesForTenant(tenantId);
        }
    });
    @endif

    // Form validation - only initialize if not already initialized
    if (!$('#tax-form').data('parsley')) {
        $('#tax-form').parsley({
            errorClass: 'is-invalid',
            successClass: 'is-valid',
            errorsWrapper: '<div class="invalid-feedback"></div>',
            errorTemplate: '<span></span>'
        });
    }

    // Custom validation for tax rate based on type
    $('#tax_rate').on('blur', function() {
        const taxType = $('#tax_type').val();
        const taxRate = parseFloat($(this).val());
        
        if (taxType === 'Percentage' && taxRate > 100) {
            $(this).addClass('is-invalid');
            if (!$(this).next('.invalid-feedback').length) {
                $(this).after('<div class="invalid-feedback">Percentage tax rate cannot exceed 100%</div>');
            }
        } else {
            $(this).removeClass('is-invalid');
            $(this).next('.invalid-feedback').remove();
        }
    });

    // Initialize select2 for better dropdown experience
    if (typeof $.fn.select2 !== 'undefined') {
        $('#tax_type, #service_id').select2({
            placeholder: 'Select an option',
            allowClear: true
        });
    }
});
</script>
@endpush