(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
"use strict";

const Repeater = Swal.mixin({
    customClass: {
        container: 'wpcfto-settings',
        confirmButton: 'button'
    }
});

Vue.component('wpcfto_repeater', {
    props: ['fields', 'field_label', 'field_name', 'field_id', 'field_value'],
    data: function data() {
      return {
        repeater: [],
        repeater_values: {}
      };
    },
    template: `
      <div class="wpcfto_generic_field wpcfto_generic_field_repeater wpcfto-repeater unflex_fields">
        <wpcfto_fields_aside_before :fields="fields" :field_label="field_label"></wpcfto_fields_aside_before>
        <div class="wpcfto-field-content">
          <div v-for="(area, area_key) in repeater" class="wpcfto-repeater-single" :class="'wpcfto-repeater_' + field_name + '_' + area_key">
            <div class="wpcfto_group_title" @click="toggleArea(area)" v-html="getGroupTitle(area, area_key)"></div>
            <div class="repeater_inner" :class="{ closed: area.closed_tab }">
              <div class="wpcfto-repeater-field" v-for="(field, field_name_inner) in fields.fields">
                <component
                    :is="'wpcfto_' + field.type"
                    :fields="field"
                    :field_id="field.field_id + '_' + area_key + '_' + field_name_inner"
                    :field_name="field_name + '_' + area_key + '_' + field_name_inner"
                    :field_label="field.label"
                    :field_value="getFieldValue(area_key, field, field_name_inner)"
                    :field_data="field"
                    :field_native_name="field_name"
                    :field_native_name_inner="field_name_inner"
                    @wpcfto-get-value="$set(repeater[area_key], field_name_inner, $event)"
                    :ref="'field_' + area_key + '_' + field_name_inner"
                ></component>
              </div>
            </div>
            <span class="wpcfto-repeater-single-delete" @click="removeArea(area_key)">
              <i class="fa fa-trash-alt"></i>Delete
            </span>
          </div>
          <div v-if="repeater && repeater.length > 0" class="separator"></div>
          <div class="addArea" @click="validateAndAddArea">
            <i class="fa fa-plus-circle"></i>
            <span v-html="'Add ' + field_label"></span>
          </div>
        </div>
        <wpcfto_fields_aside_after :fields="fields"></wpcfto_fields_aside_after>
      </div>
    `,
    mounted: function mounted() {
        var _this = this;
        if (typeof _this.field_value === 'string' && WpcftoIsJsonString(_this.field_value)) {
          _this.field_value = JSON.parse(_this.field_value);
        }
        if (typeof _this.field_value !== 'undefined' && typeof _this.field_value !== 'string') {
          _this.$set(_this, 'repeater_values', _this.field_value);
          _this.repeater_values.forEach(function(item, index) {
            var repeaterItem = { closed_tab: true };
            for (var field_name in item) {
              repeaterItem[field_name] = item[field_name];
            }
            _this.repeater.push(repeaterItem);
          });
          // *** Ensure ALL rows are closed after initialization ***
          _this.repeater.forEach(function(item) {
            item.closed_tab = true;
          });
        }
    },
    methods: {
        // This method validates all visible required fields in all rows before adding a new row
        validateAndAddArea: function() {
            var invalidFields = [];
            // Loop through all repeater rows and all fields
            this.repeater.forEach((area, area_key) => {
            for (const field_name_inner in this.fields.fields) {
                const field = this.fields.fields[field_name_inner];
                // Find the child component via $refs
                const refName = 'field_' + area_key + '_' + field_name_inner;
                const child = this.$refs[refName];
                // $refs[refName] can be an array if used inside v-for, so get the first element
                const childComponent = Array.isArray(child) ? child[0] : child;
                // If the child component exists and has validateField method, call it
                if (childComponent && typeof childComponent.validateField === 'function') {
                // Only validate visible required fields
                if (childComponent.isVisible && childComponent.fields && childComponent.fields.required) {
                    if (!childComponent.validateField()) {
                    invalidFields.push({
                        label: childComponent.fields.label || field_name_inner,
                        area: area_key + 1
                    });
                    // Optionally, you can add a visual error class here
                    // childComponent.$el.classList.add('invalid-field');
                    }
                }
                }
            }
            });
            if (invalidFields.length > 0) {
            // Compose error message
            var msg = 'Please fill all required fields before adding a new item:\n\n';
            msg += invalidFields.map(f => 'Item #' + f.area + ': ' + f.label).join('\n');
            // Use SweetAlert2 if available, otherwise alert()
            if (typeof window.Swal === 'function') {
                Repeater.fire({
                    icon: 'warning',
                    title: 'Required fields missing',
                    html: msg.replace(/\n/g, '<br>')
                });
            } else {
                alert(msg);
            }
            return;
            }
            // If all required fields are valid, add a new row
            this.addArea();
        },
        addArea: function addArea() {
            // Close all rows before adding new
            this.repeater.forEach(item => { item.closed_tab = true; });
            this.repeater.push({ closed_tab: false }); // new row is open
            var el = 'wpcfto-repeater_' + this.field_name + '_' + (this.repeater.length - 1);
            Vue.nextTick(function () {
                if (typeof jQuery !== 'undefined') {
                    var $ = jQuery;
                    $([document.documentElement, document.body]).animate({
                    scrollTop: $("." + el).offset().top - 40
                    }, 400);
                }
            });
            this.validateField();
        },
        toggleArea: function toggleArea(area) {
            // Close all other rows
            this.repeater.forEach(item => {
              if (item !== area) {
                this.$set(item, 'closed_tab', true);
              }
            });
            
            // Toggle clicked row's closed_tab state
            const isCurrentlyClosed = area.closed_tab === true || typeof area.closed_tab === 'undefined';
            this.$set(area, 'closed_tab', !isCurrentlyClosed);
        },
        removeArea: function removeArea(areaIndex) {
            // if (confirm('Do your really want to delete this field?')) {
            //     this.repeater.splice(areaIndex, 1);
            // }
            Repeater.fire({
                icon: 'question',
                html: 'Do your really want to delete this item?',
                showCancelButton: true,
                reverseButtons: true
            }).then((result) => {
                if (result.isConfirmed) {
                    this.repeater.splice(areaIndex, 1);
                }
            });
        },
        getFieldValue: function getFieldValue(key, field, field_name) {
            if (this.repeater[key] && typeof this.repeater[key][field_name] !== 'undefined') {
                return this.repeater[key][field_name];
            }
            if (typeof this.repeater_values !== 'undefined' &&
                typeof this.repeater_values[key] !== 'undefined' &&
                typeof this.repeater_values[key][field_name] !== 'undefined') {
                    return this.repeater_values[key][field_name];
                }
            return field.value;
        },
        getGroupTitle(area, area_key) {
            let groupTitleFieldName = null;
            let groupTitleField = null;
            for (const [fname, field] of Object.entries(this.fields.fields)) {
            if (field.is_group_title) {
                groupTitleFieldName = fname;
                groupTitleField = field;
                break;
            }
            }
            if (groupTitleFieldName) {
            let value = area[groupTitleFieldName];
            if (typeof value === 'undefined' && this.repeater_values && this.repeater_values[area_key]) {
                value = this.repeater_values[area_key][groupTitleFieldName];
            }
            if (typeof value === 'undefined' || value === '') {
                value = groupTitleField.label || this.field_label;
            } else {
                if (groupTitleField.options && groupTitleField.options[value]) {
                value = groupTitleField.options[value];
                }
            }
            return value;
            }
            return this.field_label + ' #' + (area_key + 1);
        },
        validateAllRows() {
            let invalidFields = [];
        
            this.repeater.forEach((area, area_key) => {
              for (const field_name_inner in this.fields.fields) {
                const field = this.fields.fields[field_name_inner];
                // Find child component by ref
                const refName = 'field_' + area_key + '_' + field_name_inner;
                const child = this.$refs[refName];
                const childComponent = Array.isArray(child) ? child[0] : child;
        
                if (childComponent && typeof childComponent.validateField === 'function') {
                  if (childComponent.isVisible && field.required) {
                    if (!childComponent.validateField()) {
                      invalidFields.push({
                        label: field.label || field_name_inner,
                        row: area_key + 1
                      });
                      // Optionally add visual error here
                    }
                  }
                }
              }
            });
        
            if (invalidFields.length > 0) {
              let msg = 'Please fill all required fields before saving:\n\n';
              msg += invalidFields.map(f => `Row #${f.row}: ${f.label}`).join('\n');
        
              if (typeof window.Swal === 'function') {
                Swal.fire({
                  icon: 'warning',
                  title: 'Required fields missing',
                  html: msg.replace(/\n/g, '<br>')
                });
              } else {
                alert(msg);
              }
              return false;
            }
        
            return true;
        },
        saveChanges() {
            if (!this.validateAllRows()) {
                return; // Prevent save if validation fails
            }
            // Proceed with save logic here...
        }
    },
    watch: {
        repeater: {
            deep: true,
            handler: function handler(repeater) {
            this.$emit('wpcfto-get-value', repeater);
            }
        }
    }
  });
  
//# sourceMappingURL=data:application/json;charset=utf-8;base64,[encoded data, 9960 characters]
},{}]},{},[1])