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

<div class="card mt-4">
    <div class="card-body">
        <div class="tabs-area">
            <form action="{{ $form_action }}" method="POST" id="discountCouponForm" class="form-horizontal custom-validation">
                @csrf
                @if($method === 'PUT')
                    @method('PUT')
                @endif

                <div class="row">
                    <!-- Basic Information -->
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="code" class="form-label">Coupon Code <span class="text-danger">*</span></label>
                            <input type="text" class="form-control @error('code') is-invalid @enderror" 
                                   id="code" name="code" 
                                   value="{{ old('code', $discountCoupon->code ?? '') }}" 
                                   placeholder="Enter coupon code" 
                                   required
                                   data-parsley-required
                                   data-parsley-minlength="3"
                                   data-parsley-maxlength="64">
                            @error('code')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <div class="form-text">Enter a unique coupon code (3-64 characters)</div>
                        </div>

                        <div class="mb-3">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" 
                                       id="change_service_price" name="change_service_price" value="1"
                                       {{ old('change_service_price', $discountCoupon->change_service_price ?? 0) ? 'checked' : '' }}>
                                <label class="form-check-label" for="change_service_price">
                                    Do you want to change service price or include it as a separate discount?
                                </label>
                            </div>
                        </div>

                        @if($show_tenant_dropdown)
                        <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', $discountCoupon->tenant_id ?? '') == $id ? 'selected' : '' }}>
                                        {{ $name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('tenant_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        @endif
                    </div>

                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="audience" class="form-label">User Type <span class="text-danger">*</span></label>
                            <select class="form-select @error('audience') is-invalid @enderror" 
                                    id="audience" name="audience" required>
                                <option value="">Select User Type</option>
                                <option value="All" {{ old('audience', $discountCoupon->audience ?? '') === 'All' ? 'selected' : '' }}>
                                    All
                                </option>
                                <option value="Customer" {{ old('audience', $discountCoupon->audience ?? '') === 'Customer' ? 'selected' : '' }}>
                                    Customer
                                </option>
                                <option value="Agent" {{ old('audience', $discountCoupon->audience ?? '') === 'Agent' ? 'selected' : '' }}>
                                    Agent
                                </option>
                                <option value="Customer_Agent" {{ old('audience', $discountCoupon->audience ?? '') === 'Customer_Agent' ? 'selected' : '' }}>
                                    Customer Agent
                                </option>
                            </select>
                            @error('audience')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="max_unique_users" class="form-label">Number of allowed users</label>
                            <input type="number" class="form-control @error('max_unique_users') is-invalid @enderror" 
                                   id="max_unique_users" name="max_unique_users" 
                                   value="{{ old('max_unique_users', $discountCoupon->max_unique_users ?? 1) }}" 
                                   placeholder="Default: 1" 
                                   min="1"
                                   data-parsley-type="integer"
                                   data-parsley-min="1">
                            @error('max_unique_users')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <div class="form-text">Maximum number of unique users who can use this coupon</div>
                        </div>

                        <div class="mb-3">
                            <label for="max_uses_per_user" class="form-label">How many number of times user can use this coupon?</label>
                            <input type="number" class="form-control @error('max_uses_per_user') is-invalid @enderror" 
                                   id="max_uses_per_user" name="max_uses_per_user" 
                                   value="{{ old('max_uses_per_user', $discountCoupon->max_uses_per_user ?? 0) }}" 
                                   placeholder="Default: 0 (unlimited)" 
                                   min="0"
                                   data-parsley-type="integer"
                                   data-parsley-min="0">
                            @error('max_uses_per_user')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <div class="form-text">Maximum times a single user can use this coupon (0 = unlimited)</div>
                        </div>

                        <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', $discountCoupon->is_active ?? 1) ? 'checked' : '' }}>
                                <label class="form-check-label" for="is_active">
                                    Active Status
                                </label>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Validity Period -->
                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="starts_at" class="form-label">Valid From</label>
                            <input type="date" class="form-control @error('starts_at') is-invalid @enderror" 
                                   id="starts_at" name="starts_at" 
                                   value="{{ old('starts_at', (isset($discountCoupon) && $discountCoupon->starts_at) ? date('Y-m-d', strtotime($discountCoupon->starts_at)) : '') }}">
                            @error('starts_at')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="expires_at" class="form-label">Valid To</label>
                            <input type="date" class="form-control @error('expires_at') is-invalid @enderror" 
                                   id="expires_at" name="expires_at" 
                                   value="{{ old('expires_at', (isset($discountCoupon) && $discountCoupon->expires_at) ? date('Y-m-d', strtotime($discountCoupon->expires_at)) : '') }}">
                            @error('expires_at')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <!-- Services & Discounts -->
                <div class="row">
                    <div class="col-12">
                        <div class="card border">
                            <div class="card-header bg-light">
                                <div class="d-flex justify-content-between align-items-center">
                                    <h6 class="card-title mb-0">Services & Pay</h6>
                                    <button type="button" class="btn btn-success btn-sm" onclick="addServiceRule()">
                                        <i class="fas fa-plus"></i> Add More
                                    </button>
                                </div>
                            </div>
                            <div class="card-body">
                                <div id="service-rules-container">
                                    @if(isset($discountCoupon) && $discountCoupon->serviceRules->count() > 0)
                                        @foreach($discountCoupon->serviceRules as $index => $serviceRule)
                                            <div class="service-rule-row mb-3" data-index="{{ $index }}">
                                                <div class="row align-items-end">
                                                    <div class="col-md-4">
                                                        <label class="form-label">Service</label>
                                                        <select class="form-select service-select" name="services[{{ $index }}][service_id]">
                                                            <option value="">All Services</option>
                                                            @foreach($services as $serviceId => $serviceName)
                                                                <option value="{{ $serviceId }}" 
                                                                    {{ $serviceRule->service_id == $serviceId ? 'selected' : '' }}>
                                                                    {{ $serviceName }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <label class="form-label">Discount Type</label>
                                                        <select class="form-select discount-type" name="services[{{ $index }}][discount_type]" required>
                                                            <option value="Percentage" {{ $serviceRule->discount_type === 'Percentage' ? 'selected' : '' }}>
                                                                Percentage (%)
                                                            </option>
                                                            <option value="Fixed" {{ $serviceRule->discount_type === 'Fixed' ? 'selected' : '' }}>
                                                                Fixed Amount ($)
                                                            </option>
                                                        </select>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <label class="form-label">Discount Value</label>
                                                        <input type="number" class="form-control discount-value" 
                                                               name="services[{{ $index }}][discount_value]" 
                                                               value="{{ $serviceRule->discount_value }}"
                                                               step="0.01" min="0" required>
                                                    </div>
                                                    <div class="col-md-2">
                                                        <button type="button" class="btn btn-danger btn-sm w-100" onclick="removeServiceRule(this)">
                                                            <i class="fas fa-trash"></i> Remove
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    @else
                                        <div class="service-rule-row mb-3" data-index="0">
                                            <div class="row align-items-end">
                                                <div class="col-md-4">
                                                    <label class="form-label">Service</label>
                                                    <select class="form-select service-select" name="services[0][service_id]">
                                                        <option value="">All Services</option>
                                                        @foreach($services as $serviceId => $serviceName)
                                                            <option value="{{ $serviceId }}">{{ $serviceName }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <div class="col-md-3">
                                                    <label class="form-label">Discount Type</label>
                                                    <select class="form-select discount-type" name="services[0][discount_type]" required>
                                                        <option value="Percentage">Percentage (%)</option>
                                                        <option value="Fixed">Fixed Amount ($)</option>
                                                    </select>
                                                </div>
                                                <div class="col-md-3">
                                                    <label class="form-label">Discount Value</label>
                                                    <input type="number" class="form-control discount-value" 
                                                           name="services[0][discount_value]" 
                                                           step="0.01" min="0" required>
                                                </div>
                                                <div class="col-md-2">
                                                    <button type="button" class="btn btn-danger btn-sm w-100" onclick="removeServiceRule(this)">
                                                        <i class="fas fa-trash"></i> Remove
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                </div>
                                
                                <div class="text-muted">
                                    <small>
                                        <i class="fas fa-info-circle"></i>
                                        Leave "Service" empty to apply discount to all services. Add multiple rules for different services.
                                    </small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Form Actions -->
                <div class="row">
                    <div class="col-12">
                        <div class="d-flex justify-content-end gap-2 mt-3">
                            <a href="{{ route('property-age-fees.index') }}" class="btn btn-dark waves-effect me-2">
                                <i class="fas fa-arrow-left"></i> Back
                            </a>
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save"></i> {{ isset($discountCoupon) ? 'Update' : 'Save' }} Coupon
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

@push('page_script')
<script src="{{ asset('assets/libs/parsleyjs/parsley.min.js') }}"></script>
<script>
let serviceRuleIndex = {{ isset($discountCoupon) ? $discountCoupon->serviceRules->count() : 1 }};

$(document).ready(function() {
    // Handle tenant change for super admin
    @if($show_tenant_dropdown)
    $('#tenant_id').on('change', function() {
        loadServicesForTenant($(this).val());
    });
    @endif

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

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

    // Update currency symbol based on discount type
    $('#discount_type').on('change', function() {
        const discountType = $(this).val();
        const symbol = $('#discount_amount_symbol');
        const amountField = $('#amount');
        
        if (discountType === 'Percentage') {
            symbol.text('%');
            amountField.attr('max', '100');
            amountField.attr('step', '0.01');
        } else if (discountType === 'Fixed') {
            symbol.text('$');
            amountField.attr('max', '999999.99');
            amountField.attr('step', '0.01');
        }
        
        // Clear any validation errors when type changes
        amountField.removeClass('is-invalid');
        amountField.next('.invalid-feedback').remove();
    });

    // Custom validation for service rule discount values
    $(document).on('blur', '.discount-value', function() {
        const row = $(this).closest('.service-rule-row');
        const discountType = row.find('.discount-type').val();
        const amount = parseFloat($(this).val());
        
        if (discountType === 'Percentage' && amount > 100) {
            $(this).addClass('is-invalid');
            if (!$(this).next('.invalid-feedback').length) {
                $(this).after('<div class="invalid-feedback">Percentage discount cannot exceed 100%</div>');
            }
        } else {
            $(this).removeClass('is-invalid');
            $(this).next('.invalid-feedback').remove();
        }
    });
    
    // Update validation when discount type changes in service rules
    $(document).on('change', '.discount-type', function() {
        const row = $(this).closest('.service-rule-row');
        const valueField = row.find('.discount-value');
        const discountType = $(this).val();
        
        if (discountType === 'Percentage') {
            valueField.attr('max', '100');
            valueField.attr('step', '0.01');
        } else if (discountType === 'Fixed') {
            valueField.attr('max', '999999.99');
            valueField.attr('step', '0.01');
        }
        
        // Clear any validation errors when type changes
        valueField.removeClass('is-invalid');
        valueField.next('.invalid-feedback').remove();
    });

    // Initialize select2 for better dropdown experience
    if (typeof $.fn.select2 !== 'undefined') {
        $('#audience').select2({
            placeholder: 'Select User Type',
            allowClear: false
        });
        
        if ($('#tenant_id').length) {
            $('#tenant_id').select2({
                placeholder: 'Select Tenant',
                allowClear: false
            });
        }
    }
            
    

    // Update discount value validation based on type
    $(document).on('change', '.discount-type', function() {
        updateDiscountValidation($(this));
    });

    // Initialize validation for existing rows
    $('.discount-type').each(function() {
        updateDiscountValidation($(this));
    });
});

function addServiceRule() {
    const container = document.getElementById('service-rules-container');
    const serviceOptions = getServiceOptions();
    
    const newRow = `
        <div class="service-rule-row mb-3" data-index="${serviceRuleIndex}">
            <div class="row align-items-end">
                <div class="col-md-4">
                    <label class="form-label">Service</label>
                    <select class="form-select service-select" name="services[${serviceRuleIndex}][service_id]">
                        <option value="">All Services</option>
                        ${serviceOptions}
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label">Discount Type</label>
                    <select class="form-select discount-type" name="services[${serviceRuleIndex}][discount_type]" required>
                        <option value="Percentage">Percentage (%)</option>
                        <option value="Fixed">Fixed Amount ($)</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label">Discount Value</label>
                    <input type="number" class="form-control discount-value" 
                           name="services[${serviceRuleIndex}][discount_value]" 
                           step="0.01" min="0" required>
                </div>
                <div class="col-md-2">
                    <button type="button" class="btn btn-danger btn-sm w-100" onclick="removeServiceRule(this)">
                        <i class="fas fa-trash"></i> Remove
                    </button>
                </div>
            </div>
        </div>
    `;
    
    container.insertAdjacentHTML('beforeend', newRow);
    serviceRuleIndex++;
}

function removeServiceRule(button) {
    const row = button.closest('.service-rule-row');
    const container = document.getElementById('service-rules-container');
    
    if (container.children.length > 1) {
        row.remove();
    } else {
        showAlert('At least one service rule is required', 'warning');
    }
}

function getServiceOptions() {
    const services = @json($services);
    let options = '';
    for (const [id, name] of Object.entries(services)) {
        options += `<option value="${id}">${name}</option>`;
    }
    return options;
}

function updateDiscountValidation(discountTypeSelect) {
    const row = discountTypeSelect.closest('.service-rule-row');
    const discountValue = row.find('.discount-value');
    const discountType = discountTypeSelect.val();
    
    if (discountType === 'Percentage') {
        discountValue.attr('max', '100');
        discountValue.attr('placeholder', 'Enter percentage (0-100)');
    } else {
        discountValue.removeAttr('max');
        discountValue.attr('placeholder', 'Enter fixed amount');
    }
}

@if($show_tenant_dropdown)
function loadServicesForTenant(tenantId) {
    if (!tenantId) {
        updateServiceSelects([]);
        return;
    }
    
    $.ajax({
        url: '{{ route("discount-coupons.get-services-by-tenant") }}',
        type: 'GET',
        data: { tenant_id: tenantId },
        success: function(response) {
            if (response && typeof response === 'object') {
                var services = [];
                for (var id in response) {
                    services.push({
                        id: id,
                        service_name: response[id]
                    });
                }
                updateServiceSelects(services);
            } else {
                updateServiceSelects([]);
            }
        },
        error: function() {
            updateServiceSelects([]);
            showAlert('Error loading services', 'error');
        }
    });
}

function updateServiceSelects(services) {
    const serviceSelects = document.querySelectorAll('.service-select');
    
    serviceSelects.forEach(function(select) {
        const currentValue = select.value;
        select.innerHTML = '<option value="">All Services</option>';
        
        services.forEach(function(service) {
            const option = document.createElement('option');
            option.value = service.id;
            option.textContent = service.service_name;
            if (service.id == currentValue) {
                option.selected = true;
            }
            select.appendChild(option);
        });
    });
}
@endif

function showAlert(message, type) {
    // Simple alert for now - can be replaced with proper toast notifications
    if (type === 'error') {
        showNotification('error', message);
    } else if (type === 'warning') {
        showNotification('warning', message);
    } else {
        showNotification('info', message);
    }
}
</script>
@endpush