@props([
    'modalId' => 'addMoreModal',
    'title' => 'Add Item',
    'fields' => [],
    'tableHeaders' => [],
    'containerSelector' => '#items-container',
    'itemName' => 'item',
    'itemNamePlural' => 'items'
])

<!-- Add More Modal -->
<div id="{{ $modalId }}" class="modal-overlay" style="display: none;">
    <div class="modal-container">
        <div class="modal-header">
            <h3 class="modal-title">
                <i class="fas fa-plus-circle"></i>
                <span id="modal-title-text">{{ $title }}</span>
            </h3>
            <button type="button" class="modal-close" onclick="closeModal('{{ $modalId }}')">
                <i class="fas fa-times"></i>
            </button>
        </div>
        
        <div class="modal-body">
            <form id="{{ $modalId }}-form">
                <input type="hidden" id="edit-index" value="">
                
                @foreach($fields as $field)
                <div class="form-group {{ $field['containerClass'] ?? '' }}">
                    <label for="{{ $field['id'] }}" class="form-label">
                        {{ $field['label'] }}
                        @if($field['required'] ?? false)
                            <span class="required">*</span>
                        @endif
                    </label>
                    
                    @if($field['type'] === 'select')
                        <select id="{{ $field['id'] }}" class="form-control" {{ ($field['required'] ?? false) ? 'required' : '' }}>
                            <option value="">{{ $field['placeholder'] ?? 'Select...' }}</option>
                            @foreach($field['options'] as $value => $label)
                                <option value="{{ $value }}">{{ $label }}</option>
                            @endforeach
                        </select>
                    @elseif($field['type'] === 'textarea')
                        <textarea id="{{ $field['id'] }}" class="form-control" 
                                  rows="{{ $field['rows'] ?? 3 }}" 
                                  placeholder="{{ $field['placeholder'] ?? '' }}"
                                  {{ ($field['required'] ?? false) ? 'required' : '' }}></textarea>
                    @elseif($field['type'] === 'checkbox')
                        <label class="checkbox-container">
                            <input type="checkbox" id="{{ $field['id'] }}" value="1">
                            <span class="checkmark"></span>
                            {{ $field['checkboxLabel'] ?? $field['label'] }}
                        </label>
                    @else
                        <input type="{{ $field['type'] ?? 'text' }}" 
                               id="{{ $field['id'] }}" 
                               class="form-control" 
                               placeholder="{{ $field['placeholder'] ?? '' }}"
                               {{ isset($field['min']) ? 'min=' . $field['min'] : '' }}
                               {{ isset($field['max']) ? 'max=' . $field['max'] : '' }}
                               {{ isset($field['step']) ? 'step=' . $field['step'] : '' }}
                               {{ ($field['required'] ?? false) ? 'required' : '' }}>
                    @endif
                    
                    <div class="input-error" id="{{ $field['id'] }}-error" style="display: none;">
                        <i class="fas fa-exclamation-circle"></i>
                        <span class="error-message"></span>
                    </div>
                </div>
                @endforeach
            </form>
        </div>
        
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" onclick="closeModal('{{ $modalId }}')">
                <i class="fas fa-times"></i>
                Cancel
            </button>
            <button type="button" class="btn btn-primary" onclick="saveItem('{{ $modalId }}')">
                <i class="fas fa-save"></i>
                <span id="save-btn-text">Save {{ $itemName }}</span>
            </button>
        </div>
    </div>
</div>

<!-- Items Table -->
<div class="items-table-container" id="{{ str_replace('#', '', $containerSelector) }}" style="display: none;">
    <div class="table-header">
        <h4 class="table-title">
            <i class="fas fa-list"></i>
            Added {{ ucfirst($itemNamePlural) }}
        </h4>
    </div>
    
    <div class="table-responsive">
        <table class="items-table">
            <thead>
                <tr>
                    @foreach($tableHeaders as $header)
                        <th>{{ $header }}</th>
                    @endforeach
                    <th class="actions-column">Actions</th>
                </tr>
            </thead>
            <tbody id="{{ str_replace('#', '', $containerSelector) }}-tbody">
                <!-- Items will be populated here -->
            </tbody>
        </table>
    </div>
</div>

<style>
/* Modal Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

.modal-container {
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    max-width: 800px;
    width: 90%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.modal-header {
    padding: 1.5rem;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8fafc;
}

.modal-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #374151;
    display: flex;
    align-items: center;
}

.modal-title i {
    margin-right: 0.5rem;
    color: #667eea;
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.25rem;
    color: #6b7280;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 6px;
    transition: all 0.2s;
}

.modal-close:hover {
    background: #f3f4f6;
    color: #374151;
}

.modal-body {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
}

.modal-footer {
    padding: 1.5rem;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    background: #f8fafc;
}

/* Table Styles */
.items-table-container {
    margin-top: 2rem;
    background: white;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    overflow: hidden;
}

.table-header {
    padding: 1rem 1.5rem;
    background: #f8fafc;
    border-bottom: 1px solid #e5e7eb;
}

.table-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #374151;
    display: flex;
    align-items: center;
}

.table-title i {
    margin-right: 0.5rem;
    color: #667eea;
}

.table-responsive {
    overflow-x: auto;
}

.items-table {
    width: 100%;
    border-collapse: collapse;
}

.items-table th {
    background: #f9fafb;
    padding: 0.75rem 1rem;
    text-align: left;
    font-weight: 600;
    color: #374151;
    border-bottom: 1px solid #e5e7eb;
    font-size: 0.875rem;
}

.items-table td {
    padding: 1rem;
    border-bottom: 1px solid #f3f4f6;
    color: #6b7280;
    font-size: 0.875rem;
    vertical-align: top;
}

.items-table tbody tr:hover {
    background: #f9fafb;
}

.actions-column {
    width: 120px;
    text-align: center;
}

.action-btn {
    background: none;
    border: none;
    padding: 0.5rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    margin: 0 0.25rem;
}

.action-btn.edit {
    color: #3b82f6;
}

.action-btn.edit:hover {
    background: #eff6ff;
    color: #1d4ed8;
}

.action-btn.delete {
    color: #ef4444;
}

.action-btn.delete:hover {
    background: #fef2f2;
    color: #dc2626;
}

.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: #6b7280;
}

.empty-state i {
    font-size: 3rem;
    color: #d1d5db;
    margin-bottom: 1rem;
}

/* Form Styles in Modal */
.modal-body .form-group {
    margin-bottom: 1.5rem;
}

.modal-body .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.modal-body .form-row .form-group {
    margin-bottom: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .modal-container {
        width: 95%;
        margin: 1rem;
    }
    
    .modal-body .form-row {
        grid-template-columns: 1fr;
    }
    
    .modal-footer {
        flex-direction: column;
    }
    
    .items-table {
        font-size: 0.75rem;
    }
    
    .items-table th,
    .items-table td {
        padding: 0.5rem;
    }
}
</style>

<script>
// Global variables for the modal system
let currentModalId = '';
let currentItems = [];
let currentEditIndex = -1;

// Open modal for adding new item
function openAddModal(modalId) {
    currentModalId = modalId;
    currentEditIndex = -1;
    
    // Reset form
    document.getElementById(modalId + '-form').reset();
    document.getElementById('edit-index').value = '';
    
    // Update modal title
    document.getElementById('modal-title-text').textContent = document.getElementById('modal-title-text').textContent.replace('Edit', 'Add');
    document.getElementById('save-btn-text').textContent = document.getElementById('save-btn-text').textContent.replace('Update', 'Save');
    
    // Clear any error messages
    clearErrorMessages(modalId);
    
    // Show modal
    document.getElementById(modalId).style.display = 'flex';
    document.body.style.overflow = 'hidden';
}

// Open modal for editing existing item
function openEditModal(modalId, index) {
    currentModalId = modalId;
    currentEditIndex = index;
    
    // Get item data
    const item = currentItems[index];
    
    // Populate form with item data
    Object.keys(item).forEach(key => {
        const field = document.getElementById(key);
        if (field) {
            if (field.type === 'checkbox') {
                field.checked = item[key] === '1' || item[key] === true;
            } else {
                field.value = item[key] || '';
            }
        }
    });
    
    document.getElementById('edit-index').value = index;
    
    // Update modal title
    document.getElementById('modal-title-text').textContent = document.getElementById('modal-title-text').textContent.replace('Add', 'Edit');
    document.getElementById('save-btn-text').textContent = document.getElementById('save-btn-text').textContent.replace('Save', 'Update');
    
    // Clear any error messages
    clearErrorMessages(modalId);
    
    // Show modal
    document.getElementById(modalId).style.display = 'flex';
    document.body.style.overflow = 'hidden';
}

// Close modal
function closeModal(modalId) {
    document.getElementById(modalId).style.display = 'none';
    document.body.style.overflow = 'auto';
    clearErrorMessages(modalId);
}

// Save item (add or update)
function saveItem(modalId) {
    const form = document.getElementById(modalId + '-form');
    const formData = new FormData(form);
    const editIndex = document.getElementById('edit-index').value;
    
    // Validate form
    if (!form.checkValidity()) {
        form.reportValidity();
        return;
    }
    
    // Collect form data
    const itemData = {};
    const inputs = form.querySelectorAll('input, select, textarea');
    inputs.forEach(input => {
        if (input.type === 'checkbox') {
            itemData[input.id] = input.checked ? '1' : '0';
        } else if (input.id !== 'edit-index') {
            itemData[input.id] = input.value;
        }
    });
    
    // Add or update item
    if (editIndex === '' || editIndex === '-1') {
        // Add new item
        currentItems.push(itemData);
    } else {
        // Update existing item
        currentItems[parseInt(editIndex)] = itemData;
    }
    
    // Refresh table
    refreshItemsTable();
    
    // Close modal
    closeModal(modalId);
    
    // Show success message
    showSuccessMessage(editIndex === '' || editIndex === '-1' ? 'Item added successfully!' : 'Item updated successfully!');
}

// Delete item
function deleteItem(index) {
    if (confirm('Are you sure you want to delete this item?')) {
        currentItems.splice(index, 1);
        refreshItemsTable();
        showSuccessMessage('Item deleted successfully!');
    }
}

// Refresh items table
function refreshItemsTable() {
    const container = document.querySelector(currentModalId.replace('Modal', '') + '-container');
    const tbody = document.querySelector(currentModalId.replace('Modal', '') + '-tbody');
    
    if (!container || !tbody) return;
    
    if (currentItems.length === 0) {
        container.style.display = 'none';
        return;
    }
    
    container.style.display = 'block';
    
    // Clear existing rows
    tbody.innerHTML = '';
    
    // Add rows for each item
    currentItems.forEach((item, index) => {
        const row = createTableRow(item, index);
        tbody.appendChild(row);
    });
}

// Create table row (this should be customized for each implementation)
function createTableRow(item, index) {
    const row = document.createElement('tr');
    
    // This is a generic implementation - should be customized
    const keys = Object.keys(item);
    keys.forEach(key => {
        if (key !== 'edit-index') {
            const cell = document.createElement('td');
            cell.textContent = item[key];
            row.appendChild(cell);
        }
    });
    
    // Actions cell
    const actionsCell = document.createElement('td');
    actionsCell.className = 'actions-column';
    actionsCell.innerHTML = `
        <button type="button" class="action-btn edit" onclick="openEditModal('${currentModalId}', ${index})" title="Edit">
            <i class="fas fa-edit"></i>
        </button>
        <button type="button" class="action-btn delete" onclick="deleteItem(${index})" title="Delete">
            <i class="fas fa-trash"></i>
        </button>
    `;
    row.appendChild(actionsCell);
    
    return row;
}

// Clear error messages
function clearErrorMessages(modalId) {
    const errorElements = document.querySelectorAll(`#${modalId} .input-error`);
    errorElements.forEach(element => {
        element.style.display = 'none';
    });
}

// Show success message
function showSuccessMessage(message) {
    // Create and show a toast notification
    const toast = document.createElement('div');
    toast.className = 'success-toast';
    toast.innerHTML = `
        <i class="fas fa-check-circle"></i>
        ${message}
    `;
    
    // Add toast styles
    toast.style.cssText = `
        position: fixed;
        top: 20px;
        right: 20px;
        background: #10b981;
        color: white;
        padding: 1rem 1.5rem;
        border-radius: 8px;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        z-index: 1001;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-weight: 500;
        transform: translateX(100%);
        transition: transform 0.3s ease;
    `;
    
    document.body.appendChild(toast);
    
    // Animate in
    setTimeout(() => {
        toast.style.transform = 'translateX(0)';
    }, 100);
    
    // Remove after 3 seconds
    setTimeout(() => {
        toast.style.transform = 'translateX(100%)';
        setTimeout(() => {
            document.body.removeChild(toast);
        }, 300);
    }, 3000);
}

// Close modal when clicking outside
document.addEventListener('click', function(event) {
    if (event.target.classList.contains('modal-overlay')) {
        closeModal(event.target.id);
    }
});

// Close modal with Escape key
document.addEventListener('keydown', function(event) {
    if (event.key === 'Escape') {
        const openModal = document.querySelector('.modal-overlay[style*="flex"]');
        if (openModal) {
            closeModal(openModal.id);
        }
    }
});
</script>"