@extends('layouts.kaiadmin.master')

@section('content')
<br>
<div class="card">
    <div class="card-header">
        <div class="d-flex justify-content-between align-items-center">
            <h1 class="card-title">Editar Item</h1>
            <a href="{{ route('accesoinformacion.show', $item['id']) }}" class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left"></i> Volver
            </a>
        </div>
    </div>

    <div class="card-body">
        @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <i class="fas fa-check-circle"></i> {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif

        @if(session('error'))
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <i class="fas fa-exclamation-circle"></i> {{ session('error') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif

        @if ($errors->any())
            <div class="alert alert-danger">
                <h6><i class="fas fa-exclamation-triangle"></i> Por favor corrige los siguientes errores:</h6>
                <ul class="mb-0">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form action="{{ route('accesoinformacion.update', $item['id']) }}" method="POST" id="editItemForm">
            @csrf
            @method('PUT')
            
            <div class="row">
                <div class="col-md-8">
                    <div class="form-group mb-3">
                        <label for="title" class="form-label">
                            <i class="fas fa-heading"></i> Título <span class="text-danger">*</span>
                        </label>
                        <input type="text" 
                               class="form-control @error('title') is-invalid @enderror" 
                               id="title" 
                               name="title" 
                               value="{{ old('title', $item['title']) }}"
                               placeholder="Ingrese el título del item" 
                               required 
                               maxlength="255">
                        @error('title')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <small class="form-text text-muted">
                            <span id="titleCounter">{{ strlen($item['title']) }}</span>/255 caracteres
                        </small>
                    </div>

                    <div class="form-group mb-3">
                        <label for="description" class="form-label">
                            <i class="fas fa-align-left"></i> Descripción <span class="text-danger">*</span>
                        </label>
                        <textarea class="form-control @error('description') is-invalid @enderror" 
                                  id="description" 
                                  name="description" 
                                  rows="5" 
                                  placeholder="Ingrese la descripción del item" 
                                  required 
                                  maxlength="500">{{ old('description', $item['description']) }}</textarea>
                        @error('description')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <small class="form-text text-muted">
                            <span id="descriptionCounter">{{ strlen($item['description']) }}</span>/500 caracteres
                        </small>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="card bg-light">
                        <div class="card-body">
                            <h6 class="card-title">
                                <i class="fas fa-info-circle"></i> Información del Item
                            </h6>
                            <hr>
                            <p class="mb-2">
                                <strong>ID:</strong> {{ $item['id'] }}
                            </p>
                            <p class="mb-2">
                                <strong>Creado:</strong><br>
                                <small>{{ \Carbon\Carbon::parse($item['created_at'])->format('d/m/Y H:i:s') }}</small>
                            </p>
                            @if($item['updated_at'] !== $item['created_at'])
                                <p class="mb-2">
                                    <strong>Última actualización:</strong><br>
                                    <small>{{ \Carbon\Carbon::parse($item['updated_at'])->format('d/m/Y H:i:s') }}</small>
                                </p>
                            @endif
                        </div>
                    </div>
                </div>
            </div>

            <hr>

            <div class="d-flex justify-content-between">
                <div>
                    <button type="submit" class="btn btn-success" id="saveButton">
                        <i class="fas fa-save"></i> Guardar cambios
                    </button>
                    <button type="button" class="btn btn-outline-secondary" onclick="resetForm()">
                        <i class="fas fa-undo"></i> Restablecer
                    </button>
                </div>
                <div>
                    <a href="{{ route('accesoinformacion.show', $item['id']) }}" class="btn btn-outline-primary">
                        <i class="fas fa-eye"></i> Ver item
                    </a>
                    <button type="button" class="btn btn-outline-danger" id="deleteButton">
                        <i class="fas fa-trash"></i> Eliminar item
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Contadores de caracteres
    const titleInput = document.getElementById('title');
    const descriptionInput = document.getElementById('description');
    const titleCounter = document.getElementById('titleCounter');
    const descriptionCounter = document.getElementById('descriptionCounter');

    // Actualizar contador de título
    titleInput.addEventListener('input', function() {
        titleCounter.textContent = this.value.length;
        if (this.value.length > 255) {
            titleCounter.parentElement.classList.add('text-danger');
        } else {
            titleCounter.parentElement.classList.remove('text-danger');
        }
    });

    // Actualizar contador de descripción
    descriptionInput.addEventListener('input', function() {
        descriptionCounter.textContent = this.value.length;
        if (this.value.length > 500) {
            descriptionCounter.parentElement.classList.add('text-danger');
        } else {
            descriptionCounter.parentElement.classList.remove('text-danger');
        }
    });

    // Confirmación antes de guardar
    document.getElementById('editItemForm').addEventListener('submit', function(e) {
        e.preventDefault();
        
        Swal.fire({
            title: '¿Guardar cambios?',
            text: "Se actualizará la información del item.",
            icon: 'question',
            showCancelButton: true,
            confirmButtonColor: '#28a745',
            cancelButtonColor: '#6c757d',
            confirmButtonText: 'Sí, guardar',
            cancelButtonText: 'Cancelar'
        }).then((result) => {
            if (result.isConfirmed) {
                this.submit();
            }
        });
    });

    // Botón de eliminar
    document.getElementById('deleteButton').addEventListener('click', function() {
        Swal.fire({
            title: '¿Estás seguro?',
            text: "Esta acción eliminará el item y todos sus archivos asociados. ¡No podrás revertir esto!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#dc3545',
            cancelButtonColor: '#6c757d',
            confirmButtonText: 'Sí, eliminar',
            cancelButtonText: 'Cancelar'
        }).then((result) => {
            if (result.isConfirmed) {
                // Crear formulario de eliminación
                const form = document.createElement('form');
                form.method = 'POST';
                form.action = "{{ route('accesoinformacion.destroy', $item['id']) }}";
                
                const csrfToken = document.createElement('input');
                csrfToken.type = 'hidden';
                csrfToken.name = '_token';
                csrfToken.value = '{{ csrf_token() }}';
                
                const methodField = document.createElement('input');
                methodField.type = 'hidden';
                methodField.name = '_method';
                methodField.value = 'DELETE';
                
                form.appendChild(csrfToken);
                form.appendChild(methodField);
                document.body.appendChild(form);
                form.submit();
            }
        });
    });

    // Detectar cambios en el formulario
    let originalData = new FormData(document.getElementById('editItemForm'));
    let hasChanges = false;

    function checkChanges() {
        const currentData = new FormData(document.getElementById('editItemForm'));
        hasChanges = false;
        
        for (let [key, value] of currentData.entries()) {
            if (originalData.get(key) !== value) {
                hasChanges = true;
                break;
            }
        }
        
        updateSaveButton();
    }

    function updateSaveButton() {
        const saveButton = document.getElementById('saveButton');
        if (hasChanges) {
            saveButton.classList.remove('btn-success');
            saveButton.classList.add('btn-warning');
            saveButton.innerHTML = '<i class="fas fa-save"></i> Guardar cambios';
        } else {
            saveButton.classList.remove('btn-warning');
            saveButton.classList.add('btn-success');
            saveButton.innerHTML = '<i class="fas fa-check"></i> Sin cambios';
        }
    }

    // Escuchar cambios en los campos
    titleInput.addEventListener('input', checkChanges);
    descriptionInput.addEventListener('input', checkChanges);

    // Advertencia al salir con cambios sin guardar
    window.addEventListener('beforeunload', function(e) {
        if (hasChanges) {
            e.preventDefault();
            e.returnValue = '¿Estás seguro de que quieres salir? Los cambios no guardados se perderán.';
        }
    });
});

// Función para restablecer el formulario
function resetForm() {
    if (document.querySelector('.text-warning')) {
        Swal.fire({
            title: '¿Restablecer cambios?',
            text: "Se perderán todos los cambios no guardados.",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#6c757d',
            cancelButtonColor: '#007bff',
            confirmButtonText: 'Sí, restablecer',
            cancelButtonText: 'Cancelar'
        }).then((result) => {
            if (result.isConfirmed) {
                document.getElementById('editItemForm').reset();
                // Restaurar valores originales
                document.getElementById('title').value = "{{ $item['title'] }}";
                document.getElementById('description').value = "{{ $item['description'] }}";
                // Actualizar contadores
                document.getElementById('titleCounter').textContent = "{{ strlen($item['title']) }}";
                document.getElementById('descriptionCounter').textContent = "{{ strlen($item['description']) }}";
            }
        });
    } else {
        document.getElementById('editItemForm').reset();
    }
}
</script>

<style>
.card-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}

.form-label {
    font-weight: 600;
    color: #495057;
}

.form-control:focus {
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.text-danger {
    color: #dc3545 !important;
}

.bg-light {
    background-color: #f8f9fa !important;
}

.btn-group .btn {
    margin-right: 0.5rem;
}

.btn-group .btn:last-child {
    margin-right: 0;
}

.alert {
    border-left: 4px solid;
}

.alert-success {
    border-left-color: #28a745;
}

.alert-danger {
    border-left-color: #dc3545;
}

hr {
    border-top: 1px solid #dee2e6;
}

.invalid-feedback {
    display: block;
}
</style>
@endsection

@section('js')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
@endsection