@props([
'fields' => [],
'fieldName' => 'meta',
'min' => 1,
'max' => 5,
'multiple' => true,
'label' => 'Add Field',
'required' => false,
'existingData' => [],
'formKey' => null, // New prop for form identification
'title' => 'default', // New prop for meta title
'useTempMeta' => true, // Changed to true by default
])

@php
// Generate unique ID for this component instance
$componentId = 'dynamic-form-' . uniqid();
$formKey = $formKey ?? $componentId;

// Parse existing data - extract status, order, and ID from Meta model columns, not from meta JSON
$parsedData = [];
if (!empty($existingData)) {
foreach ($existingData as $index => $item) {
if (is_object($item)) {
// Extract meta JSON data (without status, order, and id)
$metaData = isset($item->meta) ? (is_array($item->meta) ? $item->meta : json_decode($item->meta, true)) : [];

// Ensure metaData is an array
if (!is_array($metaData)) {
$metaData = [];
}

// Add status, order, and ID from the model columns (separate from meta JSON)
$parsedData[$index] = array_merge($metaData, [
'status' => $item->status ?? 0,
'order' => $item->order ?? null, // Changed: Default order to null
'id' => $item->id ?? null,
'temp_id' => $item->temp_id ?? null // Include temp_id for temp meta
]);
} elseif (is_array($item)) {
$parsedData[$index] = $item;
}
}
}

// Fix: Determine the number of fields to render correctly
$existingCount = count($parsedData);
if ($min == 0 && $existingCount == 0) {
$fieldsToRender = 0; // Render no fields initially when min=0 and no existing data
} else {
$fieldsToRender = max($min, $existingCount);
}
@endphp

<style>
    .preview-container {
        margin-top: 0.75rem;
    }

    .preview-image {
        width: 100px;
        height: auto;
        border-radius: 4px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        margin-right: 10px;
        margin-bottom: 10px;
        display: inline-block;
    }

    .video-preview img {
        height: 100px;
    }

    .add-field-btn.hidden {
        display: none !important;
    }
</style>

<div class="dynamic-form-container" id="{{ $componentId }}" data-field-name="{{ $fieldName }}"
    data-multiple="{{ $multiple ? 'true' : 'false' }}" data-max="{{ $max }}" data-min="{{ $min }}"
    data-form-key="{{ $formKey }}" data-title="{{ $title }}" data-use-temp-meta="{{ $useTempMeta ? 'true' : 'false' }}">

    <div class="dynamic-fields-wrapper">
        @for ($i = 0; $i < $fieldsToRender; $i++) @php $existingItem=$parsedData[$i] ?? [];
            $tempId=$existingItem['temp_id'] ?? 'temp-' . uniqid();
            $defaultOrder = $existingItem['order'] ?? null; // Changed: Default to null
            @endphp <div class="card mb-4 dynamic-field-group"
            data-index="{{ $i }}" data-temp-id="{{ $tempId }}">
            <div class="card-header text-white mb-2 bg-primary d-flex justify-content-between align-items-center">
                <strong>
                    <i class="fas fa-image me-2"></i>{{ ucfirst($fieldName) }} {{ $i + 1 }}
                </strong>
                @if($fieldsToRender > $min || $i >= $min)
                <button type="button" class="btn-close remove-field-btn" aria-label="Close"></button>
                @endif
            </div>

            <div class="card-body">
                <div class="row g-3">
                    {{-- Hidden ID field for existing records --}}
                    @if(isset($existingItem['id']) && $existingItem['id'])
                    <input type="hidden" name="{{ $fieldName }}[{{ $i }}][id]" value="{{ $existingItem['id'] }}">
                    @endif

                    {{-- Hidden temp_id field for temp meta --}}
                    @if($useTempMeta)
                    <input type="hidden" name="{{ $fieldName }}[{{ $i }}][temp_id]" value="{{ $tempId }}">
                    @endif

                    @foreach ($fields as $field)
                    @php
                    $fieldValue = old($fieldName . '.' . $i . '.' . $field['name']) ?? ($existingItem[$field['name']] ??
                    '');
                    $fieldRequired = $required || (isset($field['required']) && $field['required']);
                    @endphp

                    <div class="col-md-{{ $field['col'] ?? 6 }}">
                        <label for="{{ $componentId }}_{{ $field['name'] }}_{{ $i }}" class="form-label">
                            {{ $field['label'] ?? ucfirst($field['name']) }}
                            @if($fieldRequired)
                            <span class="text-danger">*</span>
                            @endif
                        </label>

                        @if ($field['type'] === 'textarea')
                        <textarea name="{{ $fieldName }}[{{ $i }}][{{ $field['name'] }}]"
                            id="{{ $componentId }}_{{ $field['name'] }}_{{ $i }}" rows="3"
                            class="form-control {{ $useTempMeta ? 'temp-meta-field' : '' }}"
                            placeholder="{{ $field['placeholder'] ?? '' }}">{{ $fieldValue }}</textarea>
                        @error($fieldName . '.' . $i . '.' . $field['name'])
                        <span class="text-danger small">{{ $message }}</span>
                        @enderror

                        @elseif ($field['type'] === 'file')
                        <input type="file" id="{{ $componentId }}_{{ $field['name'] }}_{{ $i }}"
                            name="{{ $fieldName }}[{{ $i }}][{{ $field['name'] }}]"
                            class="form-control {{ $useTempMeta ? 'temp-meta-file' : '' }}" accept="image/*"
                            data-preview-target="{{ $componentId }}_{{ $field['name'] }}_preview_{{ $i }}" />
                        @error($fieldName . '.' . $i . '.' . $field['name'])
                        <span class="text-danger small">{{ $message }}</span>
                        @enderror

                        <div id="{{ $componentId }}_{{ $field['name'] }}_preview_{{ $i }}" class="preview-container">
                            @if(!empty($fieldValue))
                            <img src="{{ asset('uploaded_images/' . $fieldValue) }}" class="preview-image"
                                alt="Current image">
                            <input type="hidden" name="{{ $fieldName }}[{{ $i }}][{{ $field['name'] }}_existing]"
                                value="{{ $fieldValue }}">
                            @endif
                        </div>

                        @elseif ($field['type'] === 'select')
                        <select name="{{ $fieldName }}[{{ $i }}][{{ $field['name'] }}]"
                            id="{{ $componentId }}_{{ $field['name'] }}_{{ $i }}"
                            class="form-select {{ $useTempMeta ? 'temp-meta-field' : '' }}">
                            <option value="">Select {{ $field['label'] ?? ucfirst($field['name']) }}</option>
                            @if(isset($field['options']))
                            @foreach($field['options'] as $optionValue => $optionLabel)
                            <option value="{{ $optionValue }}" {{ $fieldValue==$optionValue ? 'selected' : '' }}>
                                {{ $optionLabel }}
                            </option>
                            @endforeach
                            @endif
                        </select>
                        @error($fieldName . '.' . $i . '.' . $field['name'])
                        <span class="text-danger small">{{ $message }}</span>
                        @enderror

                        @elseif ($field['type'] === 'checkbox')
                        <div class="form-check">
                            @php
                            $checkboxValue = old($fieldName . '.' . $i . '.' . $field['name']) ??
                            ($existingItem[$field['name']] ?? 0);
                            @endphp
                            {{-- Hidden field to ensure 0 is sent when checkbox is unchecked --}}
                            <input type="hidden" name="{{ $fieldName }}[{{ $i }}][{{ $field['name'] }}]" value="0" />
                            <input type="checkbox" id="{{ $componentId }}_{{ $field['name'] }}_{{ $i }}"
                                name="{{ $fieldName }}[{{ $i }}][{{ $field['name'] }}]" value="1"
                                class="form-check-input {{ $useTempMeta ? 'temp-meta-field' : '' }}" {{
                                $checkboxValue==1 ? 'checked' : '' }} />
                            <label for="{{ $componentId }}_{{ $field['name'] }}_{{ $i }}" class="form-check-label">
                                <i class="fas fa-check-circle me-1"></i>{{ $field['label'] ?? ucfirst($field['name']) }}
                            </label>
                        </div>
                        @error($fieldName . '.' . $i . '.' . $field['name'])
                        <span class="text-danger small">{{ $message }}</span>
                        @enderror

                        @else
                        <input type="{{ $field['type'] ?? 'text' }}"
                            name="{{ $fieldName }}[{{ $i }}][{{ $field['name'] }}]"
                            id="{{ $componentId }}_{{ $field['name'] }}_{{ $i }}"
                            class="form-control {{ $useTempMeta ? 'temp-meta-field' : '' }}"
                            placeholder="{{ $field['placeholder'] ?? '' }}" value="{{ $fieldValue }}" />
                        @error($fieldName . '.' . $i . '.' . $field['name'])
                        <span class="text-danger small">{{ $message }}</span>
                        @enderror
                        @endif
                    </div>
                    @endforeach

                    {{-- Order field - now starts with null/empty value --}}
                    <div class="col-md-2">
                        <label for="{{ $componentId }}_order_{{ $i }}" class="form-label">
                            Order
                        </label>
                        @php
                        $orderValue = old($fieldName . '.' . $i . '.order') ?? $defaultOrder;
                        @endphp
                        <input type="number" name="{{ $fieldName }}[{{ $i }}][order]"
                            id="{{ $componentId }}_order_{{ $i }}"
                            class="form-control {{ $useTempMeta ? 'temp-meta-field' : '' }}" 
                            value="{{ $orderValue }}" min="0" placeholder="Enter order" />
                        @error($fieldName . '.' . $i . '.order')
                        <span class="text-danger small">{{ $message }}</span>
                        @enderror
                    </div>

                    {{-- Status checkbox --}}
                    <div class="col-md-2">
                        <div class="form-check" style="margin-top: 2.5rem !important;">
                            @php
                            $statusValue = old($fieldName . '.' . $i . '.status') ?? ($existingItem['status'] ?? 0);
                            @endphp
                            {{-- Hidden field to ensure 0 is sent when checkbox is unchecked --}}
                            <input type="hidden" name="{{ $fieldName }}[{{ $i }}][status]" value="0" />
                            <input type="checkbox" id="{{ $componentId }}_status_{{ $i }}"
                                name="{{ $fieldName }}[{{ $i }}][status]" value="1"
                                class="form-check-input {{ $useTempMeta ? 'temp-meta-field' : '' }}" {{ $statusValue==1
                                ? 'checked' : '' }} />
                            <label for="{{ $componentId }}_status_{{ $i }}" class="form-check-label">
                                <i class="fas fa-toggle-on me-1"></i>Active
                            </label>
                        </div>
                    </div>
                </div>
            </div>
    </div>
    @endfor
</div>

<div class="text-center">
    <button type="button" class="btn add-field-btn btn-primary {{ $fieldsToRender >= $max ? 'hidden' : '' }}">
        <i class="fas fa-plus me-2"></i>{{ $label }}
    </button>
</div>

{{-- Template for dynamically added fields --}}
<template class="field-template">
    <div class="card mb-4 dynamic-field-group" data-index="__INDEX__" data-temp-id="__TEMP_ID__">
        <div class="card-header text-white mb-2 bg-primary d-flex justify-content-between align-items-center">
            <strong>
                <i class="fas fa-image me-2"></i>{{ ucfirst($fieldName) }} __NUMBER__
            </strong>
            <button type="button" class="btn-close remove-field-btn" aria-label="Close"></button>
        </div>
        <div class="card-body">
            <div class="row g-3">
                {{-- No ID field for new records - they will be created fresh --}}

                {{-- Hidden temp_id field for temp meta --}}
                @if($useTempMeta)
                <input type="hidden" name="{{ $fieldName }}[__INDEX__][temp_id]" value="__TEMP_ID__">
                @endif

                @foreach ($fields as $field)
                <div class="col-md-{{ $field['col'] ?? 6 }}">
                    <label for="{{ $componentId }}_{{ $field['name'] }}___INDEX__" class="form-label">
                        {{ $field['label'] ?? ucfirst($field['name']) }}
                        @if($required || (isset($field['required']) && $field['required']))
                        <span class="text-danger">*</span>
                        @endif
                    </label>

                    @if ($field['type'] === 'textarea')
                    <textarea name="{{ $fieldName }}[__INDEX__][{{ $field['name'] }}]"
                        id="{{ $componentId }}_{{ $field['name'] }}___INDEX__" rows="3"
                        class="form-control {{ $useTempMeta ? 'temp-meta-field' : '' }}"
                        placeholder="{{ $field['placeholder'] ?? '' }}"></textarea>

                    @elseif ($field['type'] === 'file')
                    <input type="file" id="{{ $componentId }}_{{ $field['name'] }}___INDEX__"
                        name="{{ $fieldName }}[__INDEX__][{{ $field['name'] }}]"
                        class="form-control {{ $useTempMeta ? 'temp-meta-file' : '' }}" accept="image/*"
                        data-preview-target="{{ $componentId }}_{{ $field['name'] }}_preview___INDEX__" />
                    <div id="{{ $componentId }}_{{ $field['name'] }}_preview___INDEX__" class="preview-container">
                        <!-- Image preview will be inserted here -->
                    </div>

                    @elseif ($field['type'] === 'select')
                    <select name="{{ $fieldName }}[__INDEX__][{{ $field['name'] }}]"
                        id="{{ $componentId }}_{{ $field['name'] }}___INDEX__"
                        class="form-select {{ $useTempMeta ? 'temp-meta-field' : '' }}">
                        <option value="">Select {{ $field['label'] ?? ucfirst($field['name']) }}</option>
                        @if(isset($field['options']))
                        @foreach($field['options'] as $optionValue => $optionLabel)
                        <option value="{{ $optionValue }}">{{ $optionLabel }}</option>
                        @endforeach
                        @endif
                    </select>

                    @elseif ($field['type'] === 'checkbox')
                    <div class="form-check" style="margin-top: 2.5rem !important;">
                        <input type="hidden" name="{{ $fieldName }}[__INDEX__][{{ $field['name'] }}]" value="0" />
                        <input type="checkbox" id="{{ $componentId }}_{{ $field['name'] }}___INDEX__"
                            name="{{ $fieldName }}[__INDEX__][{{ $field['name'] }}]" value="1"
                            class="form-check-input {{ $useTempMeta ? 'temp-meta-field' : '' }}" />
                        <label for="{{ $componentId }}_{{ $field['name'] }}___INDEX__" class="form-check-label">
                            <i class="fas fa-check-circle me-1"></i>{{ $field['label'] ?? ucfirst($field['name']) }}
                        </label>
                    </div>

                    @else
                    <input type="{{ $field['type'] ?? 'text' }}"
                        name="{{ $fieldName }}[__INDEX__][{{ $field['name'] }}]"
                        id="{{ $componentId }}_{{ $field['name'] }}___INDEX__"
                        class="form-control {{ $useTempMeta ? 'temp-meta-field' : '' }}"
                        placeholder="{{ $field['placeholder'] ?? '' }}" />
                    @endif
                </div>
                @endforeach

                {{-- Order field - now starts with empty value --}}
                <div class="col-md-2">
                    <label for="{{ $componentId }}_order___INDEX__" class="form-label">
                        Order
                    </label>
                    <input type="number" name="{{ $fieldName }}[__INDEX__][order]"
                        id="{{ $componentId }}_order___INDEX__"
                        class="form-control {{ $useTempMeta ? 'temp-meta-field' : '' }}" 
                        value="" min="0" placeholder="Enter order" />
                </div>

                {{-- Status checkbox --}}
                <div class="col-md-2">
                    <div class="form-check" style="margin-top: 2.5rem !important;">
                        <input type="hidden" name="{{ $fieldName }}[__INDEX__][status]" value="0" />
                        <input type="checkbox" id="{{ $componentId }}_status___INDEX__"
                            name="{{ $fieldName }}[__INDEX__][status]" value="1"
                            class="form-check-input {{ $useTempMeta ? 'temp-meta-field' : '' }}" />
                        <label for="{{ $componentId }}_status___INDEX__" class="form-check-label">
                            <i class="fas fa-toggle-on me-1"></i>Active
                        </label>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
    initDynamicForm('{{ $componentId }}');
});

function initDynamicForm(componentId) {
    const container = document.getElementById(componentId);
    if (!container) return;

    const addBtn = container.querySelector('.add-field-btn');
    const wrapper = container.querySelector('.dynamic-fields-wrapper');
    const template = container.querySelector('.field-template');
    const maxFields = parseInt(container.dataset.max);
    const minFields = parseInt(container.dataset.min);
    const fieldName = container.dataset.fieldName;
    const formKey = container.dataset.formKey;
    const title = container.dataset.title;
    const useTempMeta = container.dataset.useTempMeta === 'true';

    let tempMetaTimeout = null;

    // Function to update button visibility
    function updateAddButtonVisibility() {
        const currentFields = wrapper.querySelectorAll('.dynamic-field-group');
        if (currentFields.length >= maxFields) {
            addBtn.classList.add('hidden');
        } else {
            addBtn.classList.remove('hidden');
        }
    }

    // Function to update remove button visibility
    function updateRemoveButtonsVisibility() {
        const currentFields = wrapper.querySelectorAll('.dynamic-field-group');
        currentFields.forEach((field, index) => {
            const removeBtn = field.querySelector('.remove-field-btn');
            if (removeBtn) {
                // Show remove button if we have more than minimum fields OR if this field is beyond minimum
                if (currentFields.length > minFields || index >= minFields) {
                    removeBtn.style.display = 'block';
                } else {
                    removeBtn.style.display = 'none';
                }
            }
        });
    }

    // Function to save temp meta data
    function saveTempMeta(fieldGroup) {
        if (!useTempMeta) return;

        const tempId = fieldGroup.dataset.tempId;
        const index = fieldGroup.dataset.index;
        const formData = new FormData();
        
        formData.append('form_key', formKey);
        formData.append('title', title);
        formData.append('temp_id', tempId);
        formData.append('_token', document.querySelector('meta[name="csrf-token"]').getAttribute('content'));

        // Collect all field data from this group
        const inputs = fieldGroup.querySelectorAll('input, select, textarea');
        inputs.forEach(input => {
            if (input.type === 'file' && input.files.length > 0) {
                formData.append(input.name.replace(/\[\d+\]/, ''), input.files[0]);
            } else if (input.type === 'checkbox') {
                formData.append(input.name.replace(/\[\d+\]/, ''), input.checked ? '1' : '0');
            } else if (input.type !== 'hidden' || input.name.includes('temp_id')) {
                formData.append(input.name.replace(/\[\d+\]/, ''), input.value);
            }
        });

        fetch('{{ route("admin.temp-meta.store") }}', {
    method: 'POST',
    body: formData,
    headers: {
        'X-Requested-With': 'XMLHttpRequest'
    }
})
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                console.log('Temp meta saved successfully');
            }
        })
        .catch(error => {
            console.error('Error saving temp meta:', error);
        });
    }

    // Function to delete temp meta data
    function deleteTempMeta(tempId) {
        if (!useTempMeta) return;

        const formData = new FormData();
        formData.append('form_key', formKey);
        formData.append('title', title);
        formData.append('temp_id', tempId);
        formData.append('_token', document.querySelector('meta[name="csrf-token"]').getAttribute('content'));

        fetch('{{ route("admin.temp-meta.delete") }}', {
    method: 'DELETE',
    body: formData,
    headers: {
        'X-Requested-With': 'XMLHttpRequest'
    }
})
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                console.log('Temp meta deleted successfully');
            }
        })
        .catch(error => {
            console.error('Error deleting temp meta:', error);
        });
    }

    // Debounced save function
    function debouncedSave(fieldGroup) {
        clearTimeout(tempMetaTimeout);
        tempMetaTimeout = setTimeout(() => {
            saveTempMeta(fieldGroup);
        }, 4000); // Save after 4 seconds of inactivity
    }

    // Initial visibility update
    updateAddButtonVisibility();
    updateRemoveButtonsVisibility();

    // Handle temp meta field changes
    if (useTempMeta) {
        container.addEventListener('input', function(e) {
            if (e.target.classList.contains('temp-meta-field')) {
                const fieldGroup = e.target.closest('.dynamic-field-group');
                if (fieldGroup) {
                    debouncedSave(fieldGroup);
                }
            }
        });

        container.addEventListener('change', function(e) {
            if (e.target.classList.contains('temp-meta-field') || e.target.classList.contains('temp-meta-file')) {
                const fieldGroup = e.target.closest('.dynamic-field-group');
                if (fieldGroup) {
                    if (e.target.type === 'file') {
                        // For file uploads, save immediately
                        saveTempMeta(fieldGroup);
                    } else {
                        debouncedSave(fieldGroup);
                    }
                }
            }
        });
    }

    // Handle file input preview
    container.addEventListener('change', function(e) {
        if (e.target.type === 'file' && e.target.hasAttribute('data-preview-target')) {
            const previewId = e.target.getAttribute('data-preview-target');
            previewImage(e.target, previewId);
        }
    });

    // Add field functionality
    addBtn.addEventListener('click', function() {
        const currentFields = wrapper.querySelectorAll('.dynamic-field-group');
        if (currentFields.length >= maxFields) {
            alert(`Maximum ${maxFields} fields allowed`);
            return;
        }

        const newIndex = getNextAvailableIndex(currentFields);
        const newNumber = newIndex + 1;
        const newTempId = 'temp-' + Date.now() + '-' + Math.random().toString(36).substr(2, 9);
        const templateContent = template.content.cloneNode(true);
        const fieldGroup = templateContent.querySelector('.dynamic-field-group');

        // Replace placeholders with actual values (removed __DEFAULT_ORDER__ replacement)
        fieldGroup.innerHTML = fieldGroup.innerHTML
            .replace(/__INDEX__/g, newIndex)
            .replace(/__NUMBER__/g, newNumber)
            .replace(/__TEMP_ID__/g, newTempId);

        fieldGroup.dataset.index = newIndex;
        fieldGroup.dataset.tempId = newTempId;
        wrapper.appendChild(fieldGroup);

        // Update button visibility after adding
        updateAddButtonVisibility();
        updateRemoveButtonsVisibility();
    });

    // Remove field functionality (delegated event listener)
    wrapper.addEventListener('click', function(e) {
        if (e.target.classList.contains('remove-field-btn')) {
            e.preventDefault();
            e.stopPropagation();
            
            const fieldGroup = e.target.closest('.dynamic-field-group');
            const currentFields = wrapper.querySelectorAll('.dynamic-field-group');
            
            // Check if we can remove (must maintain minimum)
            if (currentFields.length <= minFields) {
                alert(`Minimum ${minFields} fields required`);
                return;
            }
            
            if (confirm('Are you sure you want to remove this field?')) {
                const tempId = fieldGroup.dataset.tempId;
                if (useTempMeta && tempId) {
                    deleteTempMeta(tempId);
                }
                
                fieldGroup.remove();
                updateFieldNumbers(wrapper, fieldName);
                updateAddButtonVisibility();
                updateRemoveButtonsVisibility();
            }
        }
    });

    function getNextAvailableIndex(currentFields) {
        const usedIndices = Array.from(currentFields).map(field => 
            parseInt(field.dataset.index)
        ).sort((a, b) => a - b);

        for (let i = 0; i < usedIndices.length + 1; i++) {
            if (!usedIndices.includes(i)) {
                return i;
            }
        }
        return usedIndices.length;
    }

    function updateFieldNumbers(wrapper, fieldName) {
        const fieldGroups = wrapper.querySelectorAll('.dynamic-field-group');
        fieldGroups.forEach((group, displayIndex) => {
            const header = group.querySelector('.card-header strong');
            const capitalizedFieldName = fieldName.charAt(0).toUpperCase() + fieldName.slice(1);
            header.innerHTML = `<i class="fas fa-image me-2"></i>${capitalizedFieldName} ${displayIndex + 1}`;
        });
    }

    function previewImage(input, previewId) {
        const previewContainer = document.getElementById(previewId);
        if (!previewContainer) return;

        const existingImg = previewContainer.querySelector('.preview-image');
        const existingHidden = previewContainer.querySelector('input[type="hidden"]');

        if (input.files && input.files[0]) {
            previewContainer.innerHTML = '';
            const reader = new FileReader();
            reader.onload = function(e) {
                const img = document.createElement('img');
                img.src = e.target.result;
                img.className = 'preview-image';
                previewContainer.appendChild(img);
            };
            reader.readAsDataURL(input.files[0]);
        } else if (!existingImg && !existingHidden) {
            previewContainer.innerHTML = '';
        }
    }
}
</script>