@extends('admin.layouts.layout')

@section('title', (isset($servicePaySetting) ? 'Edit' : 'Add') . ' Service & Pay - ' . $employee->full_name)

<style>
/* Hide validation feedback until manually shown */
.invalid-feedback {
    display: none;
}

.invalid-feedback.show {
    display: block;
}

/* Custom styling for error messages similar to agency form */
.is-invalid {
    border-color: #dc3545 !important;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath d='m5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.invalid-feedback {
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.required {
    color: #dc3545;
}
</style>

@section('content')
<div class="">

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    @if(isset($servicePaySetting))
                        {!! html()->form('PUT', route($routePrefix . '.update', $servicePaySetting->id))->attributes(['id' => 'servicePayForm'])->open() !!}
                    @else
                        {!! html()->form('POST', route($routePrefix . '.store'))->attributes(['id' => 'servicePayForm'])->open() !!}
                    @endif

                    {!! html()->hidden('user_id', $employee->id) !!}

                    @if(!session('tenant_id') && isset($tenantList))
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="tenant_id" class="form-label">Tenant <span class="required">*</span></label>
                                    <select name="tenant_id" id="tenant_id" class="form-select">
                                        <option value="">Select Tenant</option>
                                        @foreach($tenantList as $tenantId => $tenantName)
                                            <option value="{{ $tenantId }}" 
                                                {{ (old('tenant_id', $servicePaySetting->tenant_id ?? '') == $tenantId) ? 'selected' : '' }}>
                                                {{ $tenantName }}
                                            </option>
                                        @endforeach
                                    </select>
                                    <div class="invalid-feedback" id="tenant-required-error"></div>
                                    @error('tenant_id')
                                        <div class="text-danger small mt-1">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    @endif

                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="service_id" class="form-label">Service <span class="required">*</span></label>
                                <select name="service_id" id="service_id" class="form-select" {{ !session('tenant_id') ? 'disabled' : '' }}>
                                    <option value="">{{ !session('tenant_id') ? 'Select Tenant First' : 'Select Service' }}</option>
                                    @if(session('tenant_id'))
                                        @foreach($services as $service)
                                            <option value="{{ $service->id }}" 
                                                {{ (old('service_id', $servicePaySetting->service_id ?? '') == $service->id) ? 'selected' : '' }}>
                                                {{ $service->service_name }}
                                            </option>
                                        @endforeach
                                    @endif
                                </select>
                                <div class="invalid-feedback" id="service-required-error"></div>
                                @error('service_id')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="pay_type" class="form-label">Pay Type <span class="required">*</span></label>
                                <select name="pay_type" id="pay_type" class="form-select">
                                    <option value="">Select Pay Type</option>
                                    @foreach($payTypes as $key => $label)
                                        <option value="{{ $key }}" 
                                            {{ (old('pay_type', $servicePaySetting->pay_type ?? '') == $key) ? 'selected' : '' }}>
                                            {{ $label }}
                                        </option>
                                    @endforeach
                                </select>
                                <div class="invalid-feedback" id="pay-type-required-error"></div>
                                @error('pay_type')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <!-- <div class="col-md-6">
                            <div class="mb-3">
                                <label for="pay_difference" class="form-label">Pay Difference <span class="required">*</span></label>
                                <div class="input-group">
                                    <span class="input-group-text">$</span>
                                    <input type="number" step="0.01" min="0" name="pay_difference" id="pay_difference" 
                                           class="form-control" 
                                           value="{{ old('pay_difference', $servicePaySetting->pay_difference ?? '') }}" 
                                           placeholder="0.00">
                                </div>
                                <div class="invalid-feedback" id="pay-difference-required-error">
                                    This value is required.
                                </div>
                                @error('pay_difference')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                        </div> -->

                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="amount_per_inspection" class="form-label">Per Inspection <span class="required">*</span></label>
                                <div class="input-group">
                                    <span class="input-group-text">$</span>
                                    <input type="number" step="0.01" min="0" name="amount_per_inspection" id="amount_per_inspection" 
                                           class="form-control" 
                                           value="{{ old('amount_per_inspection', $servicePaySetting->amount_per_inspection ?? '') }}" 
                                           placeholder="25.00">
                                </div>
                                <div class="invalid-feedback" id="amount-per-inspection-required-error"></div>
                                @error('amount_per_inspection')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="inspection_from" class="form-label">Inspection From <span class="required">*</span></label>
                                <select name="inspection_from" id="inspection_from" class="form-select">
                                    @foreach($inspectionFromOptions as $key => $label)
                                        <option value="{{ $key }}" 
                                            {{ (old('inspection_from', $servicePaySetting->inspection_from ?? 'company') == $key) ? 'selected' : '' }}>
                                            {{ $label }}
                                        </option>
                                    @endforeach
                                </select>
                                <div class="invalid-feedback" id="inspection-from-required-error"></div>
                                @error('inspection_from')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="text-end mt-3">
                        <a href="{{ route($routePrefix . '.index', ['user_id' => $employee->id]) }}" class="btn btn-dark waves-effect me-2">Cancel</a>
                        <button type="submit" class="btn btn-primary">{{ isset($servicePaySetting)? 'Update' : 'Add' }} Setting</button>
                    </div>


                    {!! html()->form()->close() !!}
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('page_script')
<script src="{{ asset('assets/libs/parsleyjs/parsley.min.js') }}"></script>
<script src="{{ asset('assets/js/pages/form-validation.init.js') }}"></script>
<script>
$(function(){
    $('.invalid-feedback').hide();
    
    // Handle form submission with custom validation
    $('#servicePayForm').on('submit', function(e) {
        e.preventDefault();
        
        // Clear previous errors
        $('.invalid-feedback').hide().removeClass('show');
        $('.is-invalid').removeClass('is-invalid');
        $('#error-summary').remove();
        
        let isValid = true;
        let errors = {};
        
        // Frontend validation
        @if(!session('tenant_id') && isset($tenantList))
        if (!$('#tenant_id').val()) {
            errors.tenant_id = ['This value is required.'];
            isValid = false;
        }
        @endif
        
        if (!$('#service_id').val()) {
            errors.service_id = ['This value is required.'];
            isValid = false;
        }
        
        if (!$('#pay_type').val()) {
            errors.pay_type = ['This value is required.'];
            isValid = false;
        }

        // Per Inspection required
        if (!$('#amount_per_inspection').val() || parseFloat($('#amount_per_inspection').val()) <= 0) {
            errors.amount_per_inspection = ['This value is required.'];
            isValid = false;
        }
        
        // if (!$('#pay_difference').val() || parseFloat($('#pay_difference').val()) <= 0) {
        //     errors.pay_difference = ['This value is required.'];
        //     isValid = false;
        // }
        
        // If frontend validation fails, show errors and stop
        if (!isValid) {
            displayValidationErrors(errors);
            return false;
        }
        
        // If validation passes, submit the form normally
        let form = this;
        let formData = new FormData(form);
        let submitUrl = $(form).attr('action');
        
        // Check if it's an update (PUT) request
        if ($('input[name="_method"]').val() === 'PUT') {
            // For PUT requests, we need to use AJAX since browsers don't support PUT in forms
            $.ajax({
                url: submitUrl,
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    // Redirect on success
                    window.location.href = "{{ route($routePrefix . '.index', ['user_id' => $employee->id]) }}";
                },
                error: function(xhr) {
                    if (xhr.status === 422) {
                        let response = xhr.responseJSON;
                        if (response.errors) {
                            displayValidationErrors(response.errors);
                        }
                    } else {
                        alert('An error occurred. Please try again.');
                    }
                }
            });
        } else {
            // For POST requests, submit normally and let Laravel handle validation
            form.submit();
        }
    });
    
    // Function to display validation errors like in agency form
    function displayValidationErrors(errors) {
        // Display individual field errors
        $.each(errors, function(field, messages) {
            // Highlight field
            let fieldElement = $('[name="' + field + '"]');
            fieldElement.addClass('is-invalid');
            
            // Show error message
            let errorElement = $('#' + field.replace(/_/g, '-') + '-required-error');
            if (errorElement.length > 0) {
                errorElement.html(messages[0]).addClass('show').show();
            } else {
                // Fallback: create error message if specific ID not found
                let fallbackError = fieldElement.siblings('.invalid-feedback').first();
                if (fallbackError.length > 0) {
                    fallbackError.html(messages[0]).addClass('show').show();
                }
            }
        });
        
        // Scroll to first error
        if ($('.is-invalid').length > 0) {
            $('html, body').animate({
                scrollTop: $('.is-invalid').first().offset().top - 100
            }, 500);
        }
    }

    // Pay type change handler for UI adjustments
    $('#pay_type').on('change', function() {
        var payType = $(this).val();
        //var payDifferenceLabel = $('#pay_difference').closest('.mb-3').find('label');
        var perInspectionLabel = $('#amount_per_inspection').closest('.mb-3').find('label');
        
        if (payType === 'percentage') {
            // payDifferenceLabel.html('Pay Difference (%) <span class="required">*</span>');
            // $('#pay_difference').closest('.input-group').find('.input-group-text').text('%');
            
            perInspectionLabel.html('Per Inspection (%) <span class="required">*</span>');
            $('#amount_per_inspection').closest('.input-group').find('.input-group-text').text('%');
        } else {
            // payDifferenceLabel.html('Pay Difference <span class="required">*</span>');
            // $('#pay_difference').closest('.input-group').find('.input-group-text').text('$');
            
            perInspectionLabel.html('Per Inspection <span class="required">*</span>');
            $('#amount_per_inspection').closest('.input-group').find('.input-group-text').text('$');
        }
    });

    // Trigger change on page load to set correct labels
    $('#pay_type').trigger('change');

    @if(!session('tenant_id') && isset($tenantList))
    // Tenant change handler for super admin
    $('#tenant_id').on('change', function() {
        var tenantId = $(this).val();
        var serviceSelect = $('#service_id');
        
        if (tenantId) {
            // Enable service dropdown and load services
            serviceSelect.prop('disabled', false);
            serviceSelect.html('<option value="">Loading services...</option>');
            
            $.ajax({
                url: '{{ route("service-pay-settings.services-by-tenant") }}',
                type: 'GET',
                data: { tenant_id: tenantId },
                success: function(response) {
                    serviceSelect.html('<option value="">Select Service</option>');
                    $.each(response, function(index, service) {
                        serviceSelect.append('<option value="' + service.id + '">' + service.service_name + '</option>');
                    });
                },
                error: function() {
                    serviceSelect.html('<option value="">Error loading services</option>');
                    alert('Error loading services for the selected tenant.');
                }
            });
        } else {
            // Disable service dropdown
            serviceSelect.prop('disabled', true);
            serviceSelect.html('<option value="">Select Tenant First</option>');
        }
    });

    // Initialize services for edit mode
    @if(isset($servicePaySetting) && $servicePaySetting->tenant_id)
        $('#tenant_id').trigger('change');
        // Set selected service after AJAX loads
        setTimeout(function() {
            $('#service_id').val('{{ $servicePaySetting->service_id }}');
        }, 1000);
    @endif
    @endif
});
</script>
@endpush