@extends('frontend.provider.app')

@section('content')

<div class="page-wrapper">
    <!-- Start Breadscrumb -->
    <div class="breadcrumb-bar">
        <div class="container">
            <div class="breadcrumb-item">
                <nav aria-label="breadcrumb" class="page-breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-items"><a href="{{ route('home') }}">{{ __('home') }}</a></li>
                        <li class="breadcrumb-items"><span><i class="isax isax-arrow-right-3"></i></span></li>
                        <li class="breadcrumb-items active" aria-current="page">{{__('Settings')}}</li>
                    </ol>
                </nav>
                <h1 class="breadcrumb-title">{{__('reschedule_settings')}}</h1>
            </div>
        </div>
        <img src="/frontend/assets/img/elements/element-01.svg" alt="elements" class="img-fluid element-one position-absolute d-none d-lg-block">
        <img src="/frontend/assets/img/elements/element-02.svg" alt="elements" class="img-fluid element-two position-absolute d-none d-lg-block">
        <img src="/frontend/assets/img/elements/element-03.svg" alt="elements" class="img-fluid element-three position-absolute d-none d-lg-block">
        <img src="/frontend/assets/img/elements/element-04.svg" alt="elements" class="img-fluid element-four position-absolute d-none d-lg-block">
        <img src="/frontend/assets/img/elements/element-05.svg" alt="elements" class="img-fluid element-five position-absolute d-none d-lg-block">
    </div>
    <!-- End Breadscrumb -->

    <!-- Start Content -->
    <div class="content">
        <div class="container">

            <!-- start row -->
            <div class="row">
                @include('provider.partials.sidebar')

                <div class="col-xl-9 col-lg-8">
                    <div class="d-flex justify-content-between align-items-center flex-wrap">
                        <h5>{{__('reschedule_settings')}}</h5>
                    </div>
                    <hr>
                    
                    <!-- Reschedule Settings Section -->
                    <div class="card mb-4">
                        <div class="card-header">
                            <h5 class="card-title">{{ __('Reschedule Fee Percentages') }}</h5>
                        </div>
                        <div class="card-body">
                            <form id="rescheduleSettingsForm">
                                @csrf
                                <div id="rescheduleRules">
                                    <!-- Dynamic rules will be added here -->
                                </div>
                                <div class="mt-3">
                                    <button type="button" id="addRescheduleRuleBtn" class="btn btn-outline-primary">
                                        <i class="fas fa-plus"></i> {{ __('Add More Rule') }}
                                    </button>
                                </div>
                                <div class="text-end mt-4">
                                    <button type="submit" class="btn btn-dark">{{ __('Save Settings') }}</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- /Page Wrapper -->

@endsection

@push('styles')
<style>
.is-invalid {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}
.is-invalid:focus {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}
.error-text {
    font-size: 0.875rem;
    margin-top: 0.25rem;
}
</style>
@endpush

@push('scripts')
<script>
$(document).ready(function() {
    // Load current settings
    loadRescheduleSettings();

    // Reschedule Settings Form
    $('#rescheduleSettingsForm').on('submit', function(e) {
        e.preventDefault();
        saveRescheduleSettings();
    });

    // Add Rule Button
    $('#addRescheduleRuleBtn').on('click', function() {
        addRescheduleRule('', '', true); // Always show delete button for new rules
    });

    function addRescheduleRule(hours = '', percentage = '', showDelete = false, customHours = '') {
        var ruleIndex = $('#rescheduleRules .rule-row').length;
        var ruleHtml = `
            <div class="rule-row row mb-3 align-items-end" data-index="${ruleIndex}">
                <div class="col-md-5">
                    <div class="mb-3">
                        <label class="form-label">{{ __('Hours Before Booking Date & Time') }} <span class="text-danger">*</span></label>
                        <select class="form-select" name="rules[${ruleIndex}][hours]" id="reschedule_hours_${ruleIndex}">
                            <option value="">{{ __('Select Hours') }}</option>
        `;
        
        for (let i = 1; i <= 50; i++) {
            ruleHtml += `<option value="${i}" ${hours == i ? 'selected' : ''}>${i} {{ __('Hours') }}</option>`;
        }
        ruleHtml += `<option value="custom" ${hours == 'custom' ? 'selected' : ''}>{{ __('Custom Hours') }}</option>`;
        
        ruleHtml += `
                        </select>
                        <input type="number" class="form-control mt-2 custom-hours-input" name="rules[${ruleIndex}][custom_hours]" id="reschedule_custom_hours_${ruleIndex}" min="1" max="999" placeholder="{{ __('Enter custom hours') }}" style="display: ${hours == 'custom' ? 'block' : 'none'};" value="${customHours}">
                        <span class="text-danger error-text" id="reschedule_hours_${ruleIndex}_error"></span>
                    </div>
                </div>
                <div class="col-md-5">
                    <div class="mb-3">
                        <label class="form-label">{{ __('Reschedule Fee (%)') }} <span class="text-danger">*</span></label>
                        <input type="number" class="form-control" name="rules[${ruleIndex}][percentage]" id="reschedule_percentage_${ruleIndex}" min="0" max="100" placeholder="0" value="${percentage}">
                        <span class="text-danger error-text" id="reschedule_percentage_${ruleIndex}_error"></span>
                    </div>
                </div>
        `;
        
        if (showDelete) {
            ruleHtml += `
                <div class="col-md-2">
                    <div class="mb-3">
                        <button type="button" class="btn btn-outline-danger remove-rule-btn" onclick="removeRescheduleRule(${ruleIndex})">
                            <i class="fas fa-trash"></i>
                        </button>
                    </div>
                </div>
            `;
        } else {
            ruleHtml += `
                <div class="col-md-2">
                    <div class="mb-3">
                        <!-- Empty space for first rule -->
                    </div>
                </div>
            `;
        }
        
        ruleHtml += `
            </div>
        `;
        
        $('#rescheduleRules').append(ruleHtml);
        
        // Clear errors when user starts typing
        $('#reschedule_hours_' + ruleIndex + ', #reschedule_percentage_' + ruleIndex + ', #reschedule_custom_hours_' + ruleIndex).on('input', function() {
            $(this).siblings('.error-text').text('');
            $(this).removeClass('is-invalid');
        });
        
        // Handle custom hours dropdown change
        $('#reschedule_hours_' + ruleIndex).on('change', function() {
            var customInput = $('#reschedule_custom_hours_' + ruleIndex);
            if ($(this).val() === 'custom') {
                customInput.show();
                customInput.prop('required', true);
            } else {
                customInput.hide();
                customInput.prop('required', false);
                customInput.val('');
            }
        });
    }

    window.removeRescheduleRule = function(index) {
        $('.rule-row[data-index="' + index + '"]').remove();
        // Re-index remaining rules
        reindexRescheduleRules();
    };

    function reindexRescheduleRules() {
        $('.rule-row').each(function(newIndex) {
            $(this).attr('data-index', newIndex);
            $(this).find('select, input').each(function() {
                var name = $(this).attr('name');
                var id = $(this).attr('id');
                if (name) {
                    $(this).attr('name', name.replace(/\[\d+\]/, '[' + newIndex + ']'));
                }
                if (id) {
                    $(this).attr('id', id.replace(/reschedule_\d+/, 'reschedule_' + newIndex));
                }
            });
            
            // Update delete button visibility and onclick
            var deleteCol = $(this).find('.col-md-2');
            if (newIndex === 0) {
                // First rule - remove delete button
                deleteCol.html('<div class="mb-3"><!-- Empty space for first rule --></div>');
            } else {
                // Additional rules - show delete button
                deleteCol.html(`
                    <div class="mb-3">
                        <button type="button" class="btn btn-outline-danger remove-rule-btn" onclick="removeRescheduleRule(${newIndex})">
                            <i class="fas fa-trash"></i>
                        </button>
                    </div>
                `);
            }
            
            // Re-attach custom hours change event
            var hoursSelect = $('#reschedule_hours_' + newIndex);
            var customInput = $('#reschedule_custom_hours_' + newIndex);
            hoursSelect.off('change').on('change', function() {
                if ($(this).val() === 'custom') {
                    customInput.show();
                    customInput.prop('required', true);
                } else {
                    customInput.hide();
                    customInput.prop('required', false);
                    customInput.val('');
                }
            });
            
            $(this).find('.error-text').each(function() {
                var errorId = $(this).attr('id');
                if (errorId) {
                    $(this).attr('id', errorId.replace(/reschedule_\d+_error/, 'reschedule_' + newIndex + '_error'));
                }
            });
        });
    }

    function loadRescheduleSettings() {
        $.ajax({
            url: '/provider/reschedule-settings/get',
            type: 'GET',
            success: function(response) {
                if (response.success) {
                    // Clear existing rules
                    $('#rescheduleRules').empty();
                    
                    // Populate form fields with current settings
                    if (response.data && response.data.rules && response.data.rules.length > 0) {
                        response.data.rules.forEach(function(rule, index) {
                            var showDelete = index > 0; // Show delete button for rules after first one
                            var hours = rule.hours || '';
                            var customHours = rule.custom_hours || '';
                            addRescheduleRule(hours, rule.percentage || '', showDelete, customHours);
                        });
                    } else {
                        // Add empty rule if no rules exist
                        addRescheduleRule('', '', false);
                    }
                } else {
                    // Add empty rule on error
                    addRescheduleRule('', '', false);
                }
            },
            error: function() {
                // Add empty rule on error
                addRescheduleRule('', '', false);
            }
        });
    }

    function saveRescheduleSettings() {
        // Clear previous errors
        $('.error-text').text('');
        $('.is-invalid').removeClass('is-invalid');
        
        var rules = [];
        var hasError = false;
        
        $('.rule-row').each(function() {
            var index = $(this).data('index');
            var hours = $('#reschedule_hours_' + index).val();
            var customHours = $('#reschedule_custom_hours_' + index).val();
            var percentage = $('#reschedule_percentage_' + index).val();
            
            if (!hours) {
                $('#reschedule_hours_' + index + '_error').text('Please select hours');
                $('#reschedule_hours_' + index).addClass('is-invalid');
                hasError = true;
            } else if (hours === 'custom' && (!customHours || customHours < 1)) {
                $('#reschedule_hours_' + index + '_error').text('Please enter custom hours');
                $('#reschedule_custom_hours_' + index).addClass('is-invalid');
                hasError = true;
            }
            
            if (!percentage || percentage < 0 || percentage > 100) {
                $('#reschedule_percentage_' + index + '_error').text('Please enter a value between 0 and 100');
                $('#reschedule_percentage_' + index).addClass('is-invalid');
                hasError = true;
            }
            
            if (hours && percentage) {
                var ruleData = {
                    hours: hours === 'custom' ? 'custom' : parseInt(hours),
                    percentage: parseInt(percentage)
                };
                if (hours === 'custom') {
                    ruleData.custom_hours = parseInt(customHours);
                    ruleData.is_custom = true;
                }
                rules.push(ruleData);
            }
        });
        
        if (hasError || rules.length === 0) {
            if (rules.length === 0) {
                toastr.error('Please add at least one reschedule rule');
            }
            return;
        }

        var formData = {
            rules: rules
        };

        $.ajax({
            url: '/provider/reschedule-settings/save',
            type: 'POST',
            data: formData,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                if (response.success) {
                    toastr.success(response.message);
                } else {
                    toastr.error(response.message);
                }
            },
            error: function(xhr) {
                if (xhr.status === 422) {
                    // Handle validation errors from server
                    var errors = xhr.responseJSON.errors;
                    $.each(errors, function(key, messages) {
                        var fieldId = key.replace(/\./g, '_');
                        $('#' + fieldId + '_error').text(messages[0]);
                        $('#' + fieldId).addClass('is-invalid');
                    });
                } else {
                    toastr.error('Error saving reschedule settings');
                }
            }
        });
    }
});
</script>
@endpush