@extends('layouts.app')

@section('title', 'Tabla: ' . $tableName)

@section('content')
<div class="container-fluid">
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('admin.config.tablas.index') }}">Tablas</a></li>
                    <li class="breadcrumb-item active">{{ $tableName }}</li>
                </ol>
            </nav>
            <h1 class="h3 mb-1 text-gray-800">
                <i class="fas fa-table text-primary me-2"></i>{{ $tableName }}
            </h1>
            <p class="text-muted mb-0">Gestionar registros de esta tabla</p>
        </div>
        <div>
            <a href="{{ route('admin.config.tablas.index') }}" class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left me-2"></i>Volver
            </a>
            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createRecordModal">
                <i class="fas fa-plus me-2"></i>Nuevo Registro
            </button>
        </div>
    </div>

    <!-- Información de la tabla -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card border-0 shadow-sm">
                <div class="card-body text-center">
                    <i class="fas fa-list fa-2x text-primary mb-2"></i>
                    <h5 class="mb-0">{{ number_format($tableInfo['record_count']) }}</h5>
                    <small class="text-muted">Registros</small>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-0 shadow-sm">
                <div class="card-body text-center">
                    <i class="fas fa-columns fa-2x text-info mb-2"></i>
                    <h5 class="mb-0">{{ count($tableInfo['columns']) }}</h5>
                    <small class="text-muted">Columnas</small>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-0 shadow-sm">
                <div class="card-body text-center">
                    <i class="fas fa-clock fa-2x text-success mb-2"></i>
                    <h5 class="mb-0">{{ $tableInfo['has_timestamps'] ? 'Sí' : 'No' }}</h5>
                    <small class="text-muted">Timestamps</small>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-0 shadow-sm">
                <div class="card-body text-center">
                    <i class="fas fa-trash-alt fa-2x text-warning mb-2"></i>
                    <h5 class="mb-0">{{ $tableInfo['has_soft_deletes'] ? 'Sí' : 'No' }}</h5>
                    <small class="text-muted">Soft Deletes</small>
                </div>
            </div>
        </div>
    </div>

    <!-- Tabla de registros -->
    <div class="card border-0 shadow-sm">
        <div class="card-header bg-white">
            <div class="row align-items-center">
                <div class="col-md-6">
                    <h5 class="mb-0">
                        <i class="fas fa-database me-2"></i>Registros
                    </h5>
                </div>
                <div class="col-md-6">
                    <div class="input-group">
                        <span class="input-group-text bg-white">
                            <i class="fas fa-search text-muted"></i>
                        </span>
                        <input type="text" class="form-control" id="recordSearch" placeholder="Buscar en registros...">
                    </div>
                </div>
            </div>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover table-striped mb-0" id="recordsTable">
                    <thead class="table-light">
                        <tr>
                            @foreach($columns as $column)
                                <th class="text-nowrap">
                                    <i class="fas fa-columns text-muted me-1"></i>{{ $column }}
                                </th>
                            @endforeach
                            <th class="text-center" style="width: 120px;">Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($records as $record)
                            <tr class="record-row">
                                @foreach($columns as $column)
                                    <td class="text-nowrap">
                                        @php
                                            $value = $record->$column ?? null;
                                            if (is_string($value) && strlen($value) > 50) {
                                                $value = '<span title="' . htmlspecialchars($value) . '">' . htmlspecialchars(substr($value, 0, 50)) . '...</span>';
                                            } elseif ($value === null) {
                                                $value = '<span class="text-muted">-</span>';
                                            } else {
                                                $value = htmlspecialchars($value);
                                            }
                                        @endphp
                                        {!! $value !!}
                                    </td>
                                @endforeach
                                <td class="text-center">
                                    <div class="btn-group btn-group-sm" role="group">
                                        <button type="button" class="btn btn-outline-warning edit-record-btn" 
                                                data-id="{{ $record->id }}" 
                                                data-bs-toggle="modal" 
                                                data-bs-target="#editRecordModal"
                                                title="Editar">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                        <button type="button" class="btn btn-outline-danger delete-record-btn" 
                                                data-id="{{ $record->id }}"
                                                data-table="{{ $tableName }}"
                                                title="Eliminar">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="{{ count($columns) + 1 }}" class="text-center py-5">
                                    <i class="fas fa-inbox fa-3x text-muted mb-3"></i>
                                    <p class="text-muted mb-0">No hay registros en esta tabla</p>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
        @if($records->hasPages())
            <div class="card-footer bg-white">
                {{ $records->links() }}
            </div>
        @endif
    </div>
</div>

<!-- Modal: Crear Registro -->
<div class="modal fade" id="createRecordModal" tabindex="-1" aria-labelledby="createRecordModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title" id="createRecordModalLabel">
                    <i class="fas fa-plus-circle me-2"></i>Crear Nuevo Registro
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="createRecordForm">
                <div class="modal-body">
                    <div class="row" id="createFormFields"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="fas fa-times me-2"></i>Cancelar
                    </button>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save me-2"></i>Guardar Registro
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal: Editar Registro -->
<div class="modal fade" id="editRecordModal" tabindex="-1" aria-labelledby="editRecordModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header bg-warning text-dark">
                <h5 class="modal-title" id="editRecordModalLabel">
                    <i class="fas fa-edit me-2"></i>Editar Registro
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="editRecordForm">
                <div class="modal-body">
                    <div class="row" id="editFormFields"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="fas fa-times me-2"></i>Cancelar
                    </button>
                    <button type="submit" class="btn btn-warning">
                        <i class="fas fa-save me-2"></i>Actualizar Registro
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

@push('styles')
<style>
.record-row:hover {
    background-color: #f8f9fa;
}

.table th {
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.modal-xl {
    max-width: 90%;
}

.form-label {
    font-weight: 500;
    color: #495057;
    margin-bottom: 0.5rem;
}

.form-control:focus, .form-select:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}
</style>
@endpush

@push('scripts')
<script>
const tableName = '{{ $tableName }}';
const columns = @json($columns);
let currentEditRecordId = null;

// Búsqueda en la tabla
document.getElementById('recordSearch')?.addEventListener('input', function() {
    const searchTerm = this.value.toLowerCase();
    const rows = document.querySelectorAll('.record-row');
    
    rows.forEach(row => {
        const text = row.textContent.toLowerCase();
        row.style.display = text.includes(searchTerm) ? '' : 'none';
    });
});

// Cargar estructura de la tabla al abrir modal de crear
document.getElementById('createRecordModal').addEventListener('show.bs.modal', function() {
    loadTableStructure('create');
});

// Cargar estructura y datos al abrir modal de editar
document.getElementById('editRecordModal').addEventListener('show.bs.modal', function(event) {
    const button = event.relatedTarget;
    currentEditRecordId = button.getAttribute('data-id');
    loadTableStructure('edit', currentEditRecordId);
});

// Cargar estructura de la tabla
function loadTableStructure(mode, recordId = null) {
    fetch(`{{ route('admin.config.tablas.structure', ['tableName' => $tableName]) }}`)
        .then(response => response.json())
        .then(structure => {
            const formFields = document.getElementById(mode + 'FormFields');
            formFields.innerHTML = '';

            structure.forEach(column => {
                if (column.name === 'id' && mode === 'create') return;
                if (column.name === 'created_at' || column.name === 'updated_at') return;
                
                const colDiv = document.createElement('div');
                colDiv.className = 'col-md-6 mb-3';

                const label = document.createElement('label');
                label.className = 'form-label';
                label.htmlFor = mode + '_' + column.name;
                label.innerHTML = `<i class="fas fa-tag text-muted me-1"></i>${column.name}`;
                if (!column.nullable && mode === 'create') {
                    label.innerHTML += ' <span class="text-danger">*</span>';
                }

                let input;
                if (column.type === 'text' || column.name.includes('description') || column.name.includes('notes') || column.name.includes('observaciones')) {
                    input = document.createElement('textarea');
                    input.className = 'form-control';
                    input.rows = 3;
                } else if (column.type === 'boolean' || column.type === 'tinyint(1)') {
                    input = document.createElement('select');
                    input.className = 'form-select';
                    input.innerHTML = '<option value="0">No</option><option value="1">Sí</option>';
                } else if (column.type === 'date') {
                    input = document.createElement('input');
                    input.type = 'date';
                    input.className = 'form-control';
                } else if (column.type === 'datetime' || column.type === 'timestamp') {
                    input = document.createElement('input');
                    input.type = 'datetime-local';
                    input.className = 'form-control';
                } else if (column.type === 'decimal' || column.type === 'float' || column.type === 'double') {
                    input = document.createElement('input');
                    input.type = 'number';
                    input.step = '0.01';
                    input.className = 'form-control';
                } else if (column.type === 'integer' || column.type === 'bigint') {
                    input = document.createElement('input');
                    input.type = 'number';
                    input.className = 'form-control';
                } else {
                    input = document.createElement('input');
                    input.type = 'text';
                    input.className = 'form-control';
                }

                input.name = column.name;
                input.id = mode + '_' + column.name;
                if (!column.nullable && mode === 'create') {
                    input.required = true;
                }

                // Agregar placeholder
                if (input.type === 'text' || input.type === 'number') {
                    input.placeholder = `Ingrese ${column.name}`;
                }

                colDiv.appendChild(label);
                colDiv.appendChild(input);
                formFields.appendChild(colDiv);
            });

            if (mode === 'edit' && recordId) {
                loadRecordData(recordId);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Error al cargar la estructura de la tabla');
        });
}

// Cargar datos del registro para editar
function loadRecordData(recordId) {
    fetch(`{{ route('admin.config.tablas.record', ['tableName' => $tableName, 'id' => ':id']) }}`.replace(':id', recordId))
        .then(response => response.json())
        .then(record => {
            Object.keys(record).forEach(column => {
                const input = document.getElementById('edit_' + column);
                if (input && record[column] !== undefined && record[column] !== null) {
                    if (input.tagName === 'SELECT') {
                        input.value = record[column];
                    } else if (input.type === 'date') {
                        const date = new Date(record[column]);
                        input.value = date.toISOString().split('T')[0];
                    } else if (input.type === 'datetime-local') {
                        const date = new Date(record[column]);
                        input.value = date.toISOString().slice(0, 16);
                    } else {
                        input.value = record[column];
                    }
                }
            });
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Error al cargar los datos del registro');
        });
}

// Crear registro
document.getElementById('createRecordForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const formData = new FormData(this);
    const data = {};
    formData.forEach((value, key) => {
        if (value !== '') {
            data[key] = value;
        }
    });

    fetch(`{{ route('admin.config.tablas.create', ['tableName' => $tableName]) }}`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: JSON.stringify(data)
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('Registro creado exitosamente');
            location.reload();
        } else {
            alert('Error: ' + data.message);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Error al crear el registro');
    });
});

// Editar registro
document.getElementById('editRecordForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const formData = new FormData(this);
    const data = {};
    formData.forEach((value, key) => {
        if (value !== '') {
            data[key] = value;
        }
    });

    if (!currentEditRecordId) {
        Swal.fire({
            icon: 'error',
            title: 'Error',
            text: 'No se pudo obtener el ID del registro'
        });
        return;
    }

    fetch(`{{ route('admin.config.tablas.update', ['tableName' => $tableName, 'id' => ':id']) }}`.replace(':id', currentEditRecordId), {
        method: 'PUT',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: JSON.stringify(data)
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('Registro actualizado exitosamente');
            location.reload();
        } else {
            alert('Error: ' + data.message);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Error al actualizar el registro');
    });
});

// Eliminar registro
document.querySelectorAll('.delete-record-btn').forEach(button => {
    button.addEventListener('click', function() {
        const recordId = this.getAttribute('data-id');

        if (confirm('¿Está seguro de eliminar este registro? Esta acción no se puede deshacer.')) {
                fetch(`{{ route('admin.config.tablas.delete', ['tableName' => $tableName, 'id' => ':id']) }}`.replace(':id', recordId), {
                    method: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    }
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        alert('El registro ha sido eliminado');
                        location.reload();
                    } else {
                        alert('Error: ' + data.message);
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('Error al eliminar el registro');
                });
        }
    });
});
</script>
@endpush
@endsection