jQuery(document).ready(function($) {
    // Funkcija za dodajanje novega polja
    function addNewField(container) {
        var $container = $('#' + container);
        var $template = $container.children().first().clone();
        
        // Počisti vrednosti v novem polju
        $template.find('input[type="text"], textarea').val('');
        $template.find('.image-preview').empty();
        $template.find('.image-preview-wrapper img').remove();
        $template.find('.itinerary-image-url').val('');
        $template.find('.itinerary-image-remove').hide();
        
        // Dodaj novo polje v kontejner
        $container.append($template);
        
        // Posodobi indekse za itinerary polja
        if (container === 'itinerary-container') {
            updateItineraryIndices();
        }
    }

    // Funkcija za odstranitev polja
    function removeField(button) {
        var $parent = $(button).closest('.repeatable-field');
        var $container = $parent.parent();
        
        // Ne dovoli odstranitve zadnjega polja
        if ($container.children('.repeatable-field').length > 1) {
            $parent.remove();
            
            // Posodobi indekse za itinerary polja
            if ($container.attr('id') === 'itinerary-container') {
                updateItineraryIndices();
            }
        }
    }

    // Posodobi indekse za itinerary polja
    function updateItineraryIndices() {
        $('#itinerary-container .repeatable-field').each(function(index) {
            $(this).find('input, textarea').each(function() {
                var name = $(this).attr('name');
                if (name) {
                    name = name.replace(/\[\d+\]/, '[' + index + ']');
                    $(this).attr('name', name);
                }
            });
        });
    }

    // Event listener za gumbe "Add"
    $('.add-field').on('click', function() {
        var container = $(this).data('container');
        addNewField(container);
    });

    // Event listener za gumbe "Remove"
    $(document).on('click', '.remove-field', function() {
        removeField(this);
    });

    // Media Uploader za hero sliko
    var heroImageFrame;
    $('.hero-image-upload').on('click', function(e) {
        e.preventDefault();

        if (heroImageFrame) {
            heroImageFrame.open();
            return;
        }

        heroImageFrame = wp.media({
            title: 'Select or Upload Hero Image',
            button: {
                text: 'Use this image'
            },
            multiple: false
        });

        heroImageFrame.on('select', function() {
            var attachment = heroImageFrame.state().get('selection').first().toJSON();
            $('#hero_image').val(attachment.url);
            $('.image-preview-wrapper img').remove();
            $('.image-preview-wrapper').append('<img src="' + attachment.url + '" alt="Hero Image" style="max-width: 300px; height: auto;">');
            $('.hero-image-remove').show();
        });

        heroImageFrame.open();
    });

    // Odstrani hero sliko
    $('.hero-image-remove').on('click', function(e) {
        e.preventDefault();
        $('#hero_image').val('');
        $('.image-preview-wrapper img').remove();
        $(this).hide();
    });

    // Media Uploader za slike itinerarija
    $(document).on('click', '.itinerary-image-upload', function(e) {
        e.preventDefault();
        var $button = $(this);
        var $field = $button.closest('.itinerary-day');

        var frame = wp.media({
            title: 'Select or Upload Day Image',
            button: {
                text: 'Use this image'
            },
            multiple: false
        });

        frame.on('select', function() {
            var attachment = frame.state().get('selection').first().toJSON();
            $field.find('.itinerary-image-url').val(attachment.url);
            $field.find('.image-preview-wrapper img').remove();
            $field.find('.image-preview-wrapper').append('<img src="' + attachment.url + '" alt="Day Image" style="max-width: 200px; height: auto;">');
            $field.find('.itinerary-image-remove').show();
        });

        frame.open();
    });

    // Odstrani sliko itinerarija
    $(document).on('click', '.itinerary-image-remove', function(e) {
        e.preventDefault();
        var $field = $(this).closest('.itinerary-day');
        $field.find('.itinerary-image-url').val('');
        $field.find('.image-preview-wrapper img').remove();
        $(this).hide();
    });
});