/**
 * Tech Repair Admin JavaScript
 */
(function($) {
    'use strict';
    
    // Initialize admin functionality when document is ready
    $(document).ready(function() {
        initPricingOptions();
        initColorPicker();
    });
    
    /**
     * Initialize color picker
     */
    function initColorPicker() {
        // Initialize WordPress color picker
        $('.color-picker').wpColorPicker({
            defaultColor: '#007bff',
            change: function(event, ui) {
                // Обновляем значение при изменении цвета
                $(this).val(ui.color.toString());
            }
        });
    }
    
    /**
     * Initialize pricing options functionality
     */
    function initPricingOptions() {
        // Handle add pricing option button
        $(document).on('click', '.add-pricing-option', function() {
            var $pricingOptions = $('#tech_repair_pricing_options');
            var optionIndex = $pricingOptions.find('.tech-repair-pricing-option').length;
            
            var template = `
                <div class="tech-repair-pricing-option" data-index="${optionIndex}">
                    <h4>Pricing Option <span class="option-number">${optionIndex + 1}</span></h4>
                    <table class="form-table">
                        <tr>
                            <th scope="row">
                                <label for="tech_repair_pricing_options_${optionIndex}_name">Option Name</label>
                            </th>
                            <td>
                                <input type="text" id="tech_repair_pricing_options_${optionIndex}_name" name="tech_repair_pricing_options[${optionIndex}][name]" value="" class="regular-text">
                            </td>
                        </tr>
                        <tr>
                            <th scope="row">
                                <label for="tech_repair_pricing_options_${optionIndex}_price">Price</label>
                            </th>
                            <td>
                                <input type="text" id="tech_repair_pricing_options_${optionIndex}_price" name="tech_repair_pricing_options[${optionIndex}][price]" value="" class="regular-text">
                            </td>
                        </tr>
                        <tr>
                            <th scope="row">
                                <label for="tech_repair_pricing_options_${optionIndex}_description">Description</label>
                            </th>
                            <td>
                                <textarea id="tech_repair_pricing_options_${optionIndex}_description" name="tech_repair_pricing_options[${optionIndex}][description]" class="large-text" rows="3"></textarea>
                            </td>
                        </tr>
                    </table>
                    <button type="button" class="button remove-pricing-option">Remove Option</button>
                    <hr>
                </div>
            `;
            
            $pricingOptions.append(template);
        });
        
        // Handle remove pricing option button
        $(document).on('click', '.remove-pricing-option', function() {
            $(this).closest('.tech-repair-pricing-option').remove();
            
            // Update option numbers
            $('.tech-repair-pricing-option').each(function(index) {
                $(this).find('.option-number').text(index + 1);
            });
        });
    }
    
})(jQuery);
